Frontend Capabilities

# Migrate from Pricify.js

If you currently use Atomic Pricing (opens new window) to display pricing tables on your website, this guide is for you. Previously, you embedded pricing tables with the Pricify.js (opens new window) NPM package. Now, use Chargebee.js to embed pricing tables and access all other frontend features, including Checkout, Portal, and Personalized Offers.

Pricify.js will be deprecated by the end of 2025. This guide explains how to migrate an existing integration from Pricify.js to the Chargebee.js Pricing Table integration.

Will Atomic Pricing stop working?

No, Atomic Pricing (opens new window) will continue to function as usual. You can access the dashboard, edit pricing pages, and manage widgets without any disruption.

Only the integration of pricing tables in your application's frontend are affected by this change.

# Reasons to migrate

The Pricify.js package will be deprecated by the end of 2025 and will no longer be maintained. To keep your integration up to date and reliable, migrate to the Chargebee.js Pricing Table integration. This migration provides the following benefits:

  • Simpler setup and maintenance: Configure Chargebee.js once for all features, including Checkout, Payment Components, Cancel Page, Pricing Table, and Personalized Offers.
    • Unified integration: Initialize with Chargebee.init() and reuse the chargebee object everywhere.
    • Single configuration: Set context (like site and businessEntityId) once; no duplicate setup for individual features.
  • Faster rollouts: Launch new pricing experiments or product changes quickly.
  • More reliable: One script reduces errors, avoids conflicts, and delivers a smoother experience.
  • Future-ready foundation: All upcoming innovations are delivered through this unified setup.

# Change summary

To migrate from the Pricify.js package to the Chargebee.js Pricing Table integration, make the following key changes:

  • Script source: Replace the Pricify.js script with the Chargebee.js script (https://js.chargebee.com/v2/chargebee.js).
  • Container element: Change the container <div> id from pricify-hosted-pricing-page to chargebee-pricing-table.
  • Container attribute names: Update all data-pricify-* attributes to data-pricing-table-*.
  • Pricing table identifier: Replace the data-pricify-pricingpage and data-pricify-site pair with a single data-pricing-table-key attribute.
  • API usage: Replace Pricify.<methodName>() with pricingTable.<methodName>().
  • Rendering: Remove the data-pricify-auto-bootstrap attribute. Call pricingTable.init() explicitly to render the pricing table.
  • API method name: Replace Pricify.openPricingPage() with pricingTable.open().
  • API parameter names: Replace the method parameters options.siteId and options.pricingPageId with options.pricingPageKey.
  • Business entity configuration: If you use multiple business entities, set the business_entity_id globally when calling Chargebee.init(). Use pricingTable.setBusinessEntity() only if you need to override the global setting for specific pricing tables.

The following code samples illustrate these changes. See the inline comments for more information.

# Render without session

DETAILS

# Before (Pricify.js)

<head>
  <script
    <!-- Old library: Pricify.js -->
    src="https://js.chargebee.com/atomicpricing/pricify.js"
    <!-- auto-bootstrap (removed later) --> 
    data-pricify-auto-bootstrap="true"
  ></script>
</head>

<body>
  <div
    id="pricify-hosted-pricing-page" <!-- Old container id -->
    data-pricify-pricingpage="YOUR-PRICING-TABLE-ID" <!-- Old attribute name -->
    data-pricify-site="YOUR-PRICING-TABLE-SITE" <!-- Old attribute name -->
  ></div>
  
  <script>
    // Old API: Pricify object
    Pricify.setVisitor({ email: "jane.doe@example.com" });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# After (Chargebee.js)

<head>
  <!-- New library: Chargebee.js -->
  <script src="https://js.chargebee.com/v2/chargebee.js" defer></script>
</head>

<body>
  <div
    id="chargebee-pricing-table" <!-- New container id -->
    data-pricing-table-key="YOUR-PRICING-TABLE-ID" <!-- Replaces the pricing page and site attributes -->
  ></div>

  <script>
    // New initialization required
    document.addEventListener('DOMContentLoaded', function() {
      const chargebee = window.Chargebee.init({
        site: "YOUR-CHARGEBEE-SUBDOMAIN",
        businessEntityId: "CHARGEBEE-BUSINESS-ENTITY-ID"
      });

      (async () => {
        const pricingTable = await chargebee.pricingTable();
        
        // API now uses pricingTable object
        pricingTable.setVisitor({ email: "jane.doe@example.com" });

        // Must call init() explicitly (no auto-bootstrap)
        pricingTable.init();
      })();
    });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# Render with session

DETAILS

# Before (Pricify.js)

<head>
  <script
    <!-- Old library: Pricify.js -->
    src="https://js.chargebee.com/atomicpricing/pricify.js"
  ></script>
</head>

<body>
  <div
    id="pricify-hosted-pricing-page" <!-- Old container id -->
    data-pricify-integrationtype="api" <!-- Old attribute name -->
  ></div>
  
  <script>
    // Old API: Pricify object
    Pricify.setVisitor({ email: "jane.doe@example.com" });

    // Old API: openPricingPage() function
    Pricify.openPricingPage({
      pricingPage: function() {
        return fetch('https://YOUR_DOMAIN/create_pricing_table', {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(data)
        }).then(response => response.json());
      },
    });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

# After (Chargebee.js)

<head>
  <!-- New library: Chargebee.js -->
  <script src="https://js.chargebee.com/v2/chargebee.js" defer></script>
</head>

<body>
  <div
    id="chargebee-pricing-table" <!-- New container id -->
    data-pricing-table-integration-type="api" <!-- Use session-based rendering -->
  ></div>

  <script>
    // New initialization required
    document.addEventListener('DOMContentLoaded', function() {
      const chargebee = window.Chargebee.init({
        site: "YOUR-CHARGEBEE-SUBDOMAIN",
        businessEntityId: "CHARGEBEE-BUSINESS-ENTITY-ID"
      });

      (async () => {
        const pricingTable = await chargebee.pricingTable();

        // API now uses pricingTable object
        pricingTable.setVisitor({ email: "jane.doe@example.com" });

        // New API method name open()
        pricingTable.open({
          pricingTable: function() {
            return fetch('https://YOUR_DOMAIN/create_pricing_table', {
              method: "POST",
              headers: {
                "Content-Type": "application/json"
              },
              body: JSON.stringify(data)
            }).then(response => response.json());
          },
        });
      })();
    });
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# Detailed migration steps

# 1. Load chargebee.js instead of pricify.js

# Before

<script
  src="https://js.chargebee.com/atomicpricing/pricify.js"
  data-pricify-auto-bootstrap="true"
></script>
1
2
3
4

# After

<script src="https://js.chargebee.com/v2/chargebee.js" defer></script>
1

Note

data-pricify-auto-bootstrap is not supported in Chargebee.js. You must call pricingTable.init() explicitly to render the pricing table.

# 2. Replace the DOM container

Replace the <div> used to render the pricing table and update its data-* attributes as follows:

# Before

<div
  id="pricify-hosted-pricing-page"
  data-pricify-pricingpage="YOUR-PRICING-TABLE-ID"
  data-pricify-site="YOUR-PRICING-TABLE-SITE"
></div>
1
2
3
4
5

# After

<div
  id="chargebee-pricing-table"
  data-pricing-table-key="YOUR-PRICING-TABLE-ID"
></div>
1
2
3
4

# 3. Initialize Chargebee.js

Once the page loads, initialize Chargebee.js with your Chargebee site subdomain to enable the use of the SDK.

# Before

Not available in pricify.js.

# After

document.addEventListener('DOMContentLoaded', function() {
  const chargebee = window.Chargebee.init({
    site: "YOUR-CHARGEBEE-SUBDOMAIN",
  });
});
1
2
3
4
5

# 4. Create the Pricing Table object

Use the pricingTable() function to instantiate Pricing Table.

# Before

Not available in pricify.js.

# After

const pricingTable = await chargebee.pricingTable();
1

# 5. Replace pricing table rendering function

# Option A: Render without session

# Before
<script
  src="https://js.chargebee.com/atomicpricing/pricify.js"
  data-pricify-auto-bootstrap="true"
></script>
1
2
3
4

OR

window.Pricify.init();
1
# After
pricingTable.init();
1

Note

data-pricify-auto-bootstrap is not supported in Chargebee.js. You must call pricingTable.init() explicitly to render the pricing table.

# Option B: Render with session

  • Replace the function call Pricify.openPricingPage() with pricingTable.open()
  • Rename the function parameter pricingPage to pricingTable
# Before

Set the container for session rendering:

<div
  id="pricify-hosted-pricing-page"
  data-pricify-integrationtype="api"
></div>
1
2
3
4

Call openPricingPage():

Pricify.openPricingPage({
  pricingPage: function() {
    return fetch('https://YOUR_DOMAIN/create_pricing_table', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    }).then(response => response.json());
  },
});
1
2
3
4
5
6
7
8
9
10
11
# After

Set the container for session rendering:

<div
  id="chargebee-pricing-table"
  data-pricing-table-integration-type="api"
></div>
1
2
3
4

Call open():

pricingTable.open({
  pricingTable: function() {
    return fetch('https://YOUR_DOMAIN/create_pricing_table', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    }).then(response => response.json());
  },
});
1
2
3
4
5
6
7
8
9
10
11

# 6. Replace other pricing table functions

  • The function names are unchanged.
  • Call the function using the pricingTable object instead of the Pricify object.
  • Replace the parameters options.siteId and options.pricingPageId with options.pricingPageKey, set to the same pricing table ID as data-pricing-table-key.

For example, update the setVisitor() function as follows.

# Before

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@example.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  customFields: {
    cf_visit_count: 13,
  },
};
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingPageId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

Pricify.setVisitor(data,options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# After

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@example.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  customFields: {
    cf_visit_count: 13,
  },
};
const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setVisitor(data,options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Refer to the API reference for examples using other functions.

# Rename data-* attributes in the container <div>

Use this mapping when updating your markup for the pricing page <div>.

Before After
data-pricify-site and data-pricify-pricingpage data-pricing-table-key
data-pricify-viewport-width data-pricing-table-viewport-width
data-pricify-viewport-height data-pricing-table-viewport-height
data-pricify-viewport-defaultheight data-pricing-table-viewport-default-height
data-pricify-currency data-pricing-table-currency
data-pricify-period data-pricing-table-period
data-pricify-periodunit data-pricing-table-period-unit
data-pricify-showcurrencydropdown data-pricing-table-show-currency-dropdown
data-pricify-autoselectlocalcurrency data-pricing-table-auto-select-local-currency
data-pricify-integrationtype data-pricing-table-integration-type
data-pricify-gtmid data-pricing-table-gtm-id

data-pricing-table-key is not a rename of the two attributes it replaces: its value is a new pricing table ID that you obtain from the pricing table's Share/Embed section. Pricing tables still on Atomic Pricing keep data-pricing-table-site and data-pricing-table-id, which are the direct renames of data-pricify-site and data-pricify-pricingpage.

# Additional resources

← Cancel Page Quickstart →