)}
)
}
`

Other popular frameworks

More examples are coming soon !

---

Pricify Object

Functions

$3

This function initialises and renders the Pricify Hosted Page.

$3

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.

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

$3

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 | 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.

#### 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.

`jsx
Pricify.setVisitor({
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@gmail.com',
phone: '+1-123-456-7890',
company: 'Chargebee',
customFields: {
cf_field_name: 'field_value',
},
});
`

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.

`jsx
const data = {
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@gmail.com',
phone: '+1-123-456-7890',
company: 'Chargebee',
customFields: {
cf_field_name: 'field_value',
},
};
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.

$3

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

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.

`jsx
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.

`jsx
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);
`

$3

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

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.

`jsx
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.

`jsx
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);
`

$3

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.

`jsx
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.

`jsx
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.

$3

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.

`jsx
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.

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

Pricify.setBusinessEntity(businessEntityId, options);
`

$3

Sets the price variant for the plans displayed on the pricing page. If the specified PRICE_VARIANT_ID is not available for a plan, the default price variant of the plan is used. If no default price variant exists, the plan is not displayed on the pricing page.

#### Examples

You can use this function in two ways:

##### Specify only the price variant

1. Set the price variant.

`jsx
Pricify.setPriceVariant('PRICE_VARIANT_ID');
`

Replace PRICE_VARIANT_ID with the ID of the price variant in Chargebee Billing.

2. Render the pricing page by calling openPricingPage() or init().

##### Specify the price variant and the pricing page

1. Set the pricing page and the price variant to display.

`jsx
const priceVariantId = 'PRICE_VARIANT_ID';
const options = {
siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setPriceVariant(priceVariantId, options);
`

Replace PRICE_VARIANT_ID with the ID of the price variant in Chargebee Billing.

2. Render the pricing page by calling openPricingPage() or init().

$3

Set subscription-level attributes in the pricing page context and pass them forward to Chargebee checkout. These attributes are associated with the subscription record in Chargebee and will be used when creating a new subscription through checkout.

Note: setSubscriptionAttributes only sets custom fields for new subscriptions.

| Attribute | Required | Type | Description |
| :------------- | :------: | :---------------------------: | :------------------------------------------------------------------------------------- |
| customFields | false | Map | Subscription custom fields declared in chargebee. Key is of the format cf_field_name |

Note: setSubscriptionAttributes can be used only to set attributes for new subscriptions.

#### examples

To set Subscription 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 Subscription attributes for all of your pricing pages.

`jsx
Pricify.setSubscriptionAttributes({
customFields: {
cf_field_name: 'field_value',
},
});
`

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

`jsx
const data = {
customFields: {
cf_field_name: 'field_value',
},
};

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

Pricify.setSubscriptionAttributes(data, 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 |
| data-pricify-gtmid | false | string | Sets the Google Tag Manager ID GTM-XXXXXXX` for the embedded Pricing Page and in-app checkout experience. |