Pricify JS

JS wrapper for your Atomic Pricing hosted page

Get Started
Pricify Object
- Functions
Data Attributes
- Script
- Pricing Page Div

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>
      )}
  )
}

Pricify Object

Functions

`init`

This function initialises and renders the Pricify Hosted Page

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)

Attribute	Required	Type	Description
`firstName`	false	string	First name
`lastName`	false	string	Last name
`email`	false	string	The email address
`phone`	false	string	The phone number
`company`	false	string	The company name
`customFields`	false	Map<string, string \| number>	Customer custom fields declared in chargebee. Key is of the format `cf_field_name`

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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)

Attribute	Required	Type	Description
`firstName`	false	string	First name
`lastName`	false	string	Last name
`email`	false	string	The email address
`phone`	false	string	The phone number
`company`	false	string	The company name
`line1`	false	string	Address line 1
`line2`	false	string	Address line 2
`line3`	false	string	Address line 3
`city`	false	string	The name of the city.
`stateCode`	false	string	The ISO 3166-2 state/province code without the country prefix. Currently supported for USA, Canada and India. For instance, for Arizona (USA), set `state_code` as `AZ` (not `US-AZ`). For Tamil Nadu (India), set as `TN` (not `IN-TN`). For British Columbia (Canada), set as `BC` (not `CA-BC`).
`state`	false	string	The state/province name. Is set by Chargebee automatically for US, Canada and India If `state_code` is provided.
`zip`	false	string	Zip or postal code. The number of characters is validated according to the rules specified here.
`country`	false	string	The address country of the customer. Must be one of ISO 3166 alpha-2 country code. If you have enabled EU VAT in 2021 or later, or have manually enable the Brexit configuration, then `XI` (the code for United Kingdom -- Northern Ireland) is available as an option.
`validationStatus`	false	string	The address verification status. - valid: Address was validated successfully. - partially_valid: The address is valid for taxability but has not been validated for shipping. - invalid: Address is invalid. - not_validated: Address is not yet validated.

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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)

Attribute	Required	Type	Description
`firstName`	false	string	First name
`lastName`	false	string	Last name
`email`	false	string	The email address
`phone`	false	string	The phone number
`company`	false	string	The company name
`line1`	false	string	Address line 1
`line2`	false	string	Address line 2
`line3`	false	string	Address line 3
`city`	false	string	The name of the city.
`stateCode`	false	string	The ISO 3166-2 state/province code without the country prefix. Currently supported for USA, Canada and India. For instance, for Arizona (USA), set `state_code` as `AZ` (not `US-AZ`). For Tamil Nadu (India), set as `TN` (not `IN-TN`). For British Columbia (Canada), set as `BC` (not `CA-BC`).
`state`	false	string	The state/province name. Is set by Chargebee automatically for US, Canada and India If `state_code` is provided.
`zip`	false	string	Zip or postal code. The number of characters is validated according to the rules specified here.
`country`	false	string	The address country of the customer. Must be one of ISO 3166 alpha-2 country code. If you have enabled EU VAT in 2021 or later, or have manually enable the Brexit configuration, then `XI` (the code for United Kingdom -- Northern Ireland) is available as an option.
`validationStatus`	false	string	The address verification status. - valid: Address was validated successfully. - partially_valid: The address is valid for taxability but has not been validated for shipping. - invalid: Address is invalid. - not_validated: Address is not yet validated.

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: 'john.doe@gmail.com',
  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: 'john.doe@gmail.com',
  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.

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.

@chargebee/atomicpricing

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`

`setVisitor`

`examples`

`setBillingAddress`

`examples`

`setShippingAddress`

`examples`

`setQuantity`

`examples`

Data attributes

Script (for vanilla integration)

Pricing Page Div

Readme

Keywords

Package Sidebar

Install

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@chargebee/atomicpricing

Readme

Keywords

Package Sidebar

Install

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads