@chargebee/atomicpricing

v0.8.1

Published

2 months ago

JS wrapper for your Atomic Pricing hosted page

Downloads

2,117

0High
0Medium
0Low

chargebee

atomicpricing pricify pricing chargebee

Pricify JS

JS wrapper for your Atomic Pricing hosted page

Get Started

Vanilla App

Auto bootstrapped (recommended)

<script
  src="https://js.chargebee.com/atomicpricing/pricify.js"
  data-pricify-auto-bootstrap="true"
></script>
<div
  id="pricify-hosted-pricing-page"
  data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
  data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
></div>

Controlled init

<script src="https://js.chargebee.com/atomicpricing/pricify.js" defer></script>
<script>
  if (
    /**
     * whenever you are ready
     * If you are planning to use onLoad, then use data-pricify-auto-bootstrap="true" instead
     */
  ) {
     window.Pricify.init();
   }
</script>
<div
  id="pricify-hosted-pricing-page"
  data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
  data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
></div>

React (CSR)

Installation

npm install --save @chargebee/atomicpricing

Usage

import Pricify from '@chargebee/atomicpricing';
import { useEffect } from 'react';

export default function PricingPage() {
  useEffect(() => {
    Pricify.init();
  }, []);

  return (
    <div
      id='pricify-hosted-pricing-page'
      data-pricify-site='01GV57EG6A1V28QR8KYBK8FE3J'
      data-pricify-pricingpage='01GV57HY1KM0ZVBSMR7SCV6VDF'
    ></div>
  );
}

Next.js (SSR)

Note that you need to mount the div and then call Pricify init to prevent hydration errors

import Pricify from "@chargebee/atomicpricing";
import { useEffect, useState } from "react";

export default function PricingPage() {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  useEffect(() => {
    if (hasMounted) {
      Pricify.init();
    }
  }, [hasMounted]);

  return (
    <>
      {hasMounted && (
        <div
          id="pricify-hosted-pricing-page"
          data-pricify-site="01GV57EG6A1V28QR8KYBK8FE3J"
          data-pricify-pricingpage="01GV57HY1KM0ZVBSMR7SCV6VDF"
        ></div>
      )}
  )
}

Other popular frameworks

More examples are coming soon !

Pricify Object

Functions

`init`

This function initialises and renders the Pricify Hosted Page

`openPricingPage`

This function opens the pricing page from pricing page session response. This function is useful when you want to open the pricing page using session context. When you call this function, make sure you set data-pricify-integrationtype="api" in the pricing page div.

Pricify.openPricingPage({
  pricingPage: function() {
    return fetch('your_backend/generate_pricing_page_session', {
      method: "POST",
      data: data,
    }).then(res => res.json()),
  },
});

`setVisitor`

Set these visitor attributes to pricing page context and passes it forward to Chargebee checkout. Visitor gets converted to a customer and hence follows attributes based on what is supported in a customer record in Chargebee. (All these are optional)

Note: setVisitor can be used only to set attributes for new customers. Atomic Pricing currently doesn't support updating an existing customer / subscription.

`examples`

To set visitor attributes for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same visitor attributes for all of your pricing pages.

Pricify.setVisitor({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
});

If you need to set visitor attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setVisitor function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setVisitor(data, options);

Pro Tip: You can control the behavior of the fields on the Chargebee Checkout by going to Checkout Field settings (Configure Chargebee > Checkout & Self Serve Portal > Fields) in your chargebee account. You can configure the fields in the following way:

Use as Hidden Parameter:
- Fields are not displayed on the checkout.
- Values passed through setVisitor() are stored against the field
Read-only:
- Fields are visible on the checkout
- Fields are pre-filled with setVisitor() values.
- Users cannot edit these values.
Show:
- Fields are visible on the checkout
- Fields are pre-filled with setVisitor() values.
- Users can edit these values.

`setBillingAddress`

Sets the billing address to pricing page context and passes it forward to Chargebee checkout. Billing address gets saved onto the customer record at the end of checkout. (All these are optional)

Note: setBillingAddress can be used only to set attributes for new customers. Atomic Pricing currently doesn't support updating an existing customer / subscription.

`examples`

Pricify.setBillingAddress({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
});

If you need to set billing attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setBillingAddress function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setBillingAddress(data, options);

`setShippingAddress`

Sets the shipping address to pricing page context and passes it forward to Chargebee checkout. Shipping address gets saved onto the customer record at the end of checkout. (All these are optional)

Note: setShippingAddress can be used only to set attributes for new subscriptions. Atomic Pricing currently doesn't support updating an existing customer / subscription.

`examples`

Pricify.setShippingAddress({
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
});

If you need to set shipping attributes for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setShippingAddress function.

const data = {
  firstName: 'John',
  lastName: 'Doe',
  email: '[email protected]',
  phone: '+1-123-456-7890',
  company: 'Chargebee',
  city: 'Chennai',
  stateCode: 'TN',
  country: 'IN',
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setShippingAddress(data, options);

`setQuantity`

Set the initial quantity for all quantity based plans in pricing page.

`examples`

To set quantity for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same quantity for all of your pricing pages.

Pricify.setQuantity(10);

If you need to set quantity for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setQuantity function.

const quantity = 10;
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setQuantity(quantity, options);

Pro Tip: Once you've set the initial quantity with setQuantity(), consider using the quantity slider for added customer control. This quantity slider can be toggled through plan settings on AtomicPricing.

When the slider is enabled, the quantity set with setQuantity() is initially applied, but users can still adjust it using the slider.
If the slider is disabled, the quantity set with setQuantity() will be used directly for the Checkout.

`setBusinessEntity`

Sets the business entity to pricing page and passes it forward to Chargebee checkout. Business entity gets saved onto the customer and subscription record at the end of checkout.

`examples`

To set business entity for all pricing page embedded in single page. You can use this if you have only one pricing page embedded in your page or you need to set same business entity for all of your pricing pages.

Pricify.setBusinessEntity('business_entity_id');

If you need to set business entity for a specific pricing page embedded, you can pass additional attributes siteId and pricingPageId as options to setBusinessEntity function.

const businessEntityId = 'business_entity_id';
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setBusinessEntity(businessEntityId, options);

Data attributes

Script (for vanilla integration)

| Attribute | Required | Type | Description | | :---------------------------- | :------: | :----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | data-pricify-auto-bootstrap | false | string | Set it to true if you want the script to render the Pricing page out of the box. If you are not providing this, you need to call window.Pricify.init() when you want the Pricing Page to be rendered |

Pricing Page Div

| Attribute | Required | Type | Description | | :------------------------------------- | :------: | :----: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data-pricify-site | true | string | Your site id. You can find that in your hosted page link https://hosted.atomicpricing.com/sites/{siteId}/pricing/{pricingPageId} | | data-pricify-pricingpage | true | string | Pricing Page ID. You can find that in your hosted page link https://hosted.atomicpricing.com/sites/{siteId}/pricing/{pricingPageId} | | data-pricify-viewport-width | false | string | Set this property if you want to limit the hosted page width. You can pass in px, em, rem or %. eg: 100%. Keep it empty if you want the hosted page to utilise the available width. | | data-pricify-viewport-height | false | string | Set this property if you want to limit the hosted page height. Keep it empty if you want the hosted page to automatically stretch to fit . You can pass in px, em, rem or %. eg: 100%. Providing this could result in a scroll bar appearing. Hence, we recommend not setting this. | | data-pricify-viewport-defaultheight | false | string | Set this property to set the height of the loader screen till the pricing page is loaded. You need to set this appropriately based on screen size. This is an optional parameter. If not passed takes a default of 600px. | | data-pricify-currency | false | string | Sets the selected currency to the provided currency. eg: USD. If not provided or is invalid, defaults to the first currency | | data-pricify-period | false | string | Sets the period to provided value. eg. If you want to set the selected frequency to 1 month, provide 1 here. If not provided or is invalid, defaults to the first available frequency. If period unit is provided and period is not given, defaults to 1 | | data-pricify-periodunit | false | string | Sets the period to provided value. eg. If you want to set the selected frequency to 1 month, provide month here. If not provided or is invalid, defaults to the first available frequency. | | data-pricify-showcurrencydropdown | false | string | Default true. Pass false to hide currency dropdown. | | data-pricify-autoselectlocalcurrency | false | string | Default false. Pass true to automatically set currency based on the visitors geolocation. For eg: if the user is from US and this flag is set USD will be selected as currency if available in the pricing page. Similarly if another visitor comes from India, then INR would be set. If the currency for the country visitor is from is not available in the pricing page, then the first currency in the currency dropdown would be selected as default. | | data-pricify-integrationtype | false | string | Pass api to open the pricing page using session context. Site id and pricing page id attributes are not applicable when integration type is set to api |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Pricify JS

Table of contents

Get Started

Vanilla App

Auto bootstrapped (recommended)

Controlled init

React (CSR)

Installation

Usage

Next.js (SSR)

Other popular frameworks

Pricify Object

Functions

init

openPricingPage

setVisitor

examples

setBillingAddress

examples

setShippingAddress

examples

setQuantity

examples

setBusinessEntity

examples

Data attributes

Script (for vanilla integration)

Pricing Page Div

`init`

`openPricingPage`

`setVisitor`

`examples`

`setBillingAddress`

`examples`

`setShippingAddress`

`examples`

`setQuantity`

`examples`

`setBusinessEntity`

`examples`