# 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-*.
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 name: Change method paramter options.pricingPageId to options.pricingTableId.
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"></script>
</head>

<body>
  <div
    id="chargebee-pricing-table" <!-- New container id -->
    data-pricing-table-id="YOUR-PRICING-TABLE-ID" <!-- Renamed attribute -->
    data-pricing-table-site="YOUR-PRICING-TABLE-SITE" <!-- Renamed attribute -->
  ></div>

  <script>
    // New initialization required
    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

# 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"></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
    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

# 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"></script>

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:

Change the value of id from pricify-hosted-pricing-page to chargebee-pricing-table.
Rename the attribute data-pricify-pricingpage to data-pricing-table-id.
Rename the attribute data-pricify-site to data-pricing-table-site.
Rename other data-* attributes as specified in the table.

# 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-id="YOUR-PRICING-TABLE-ID"
  data-pricing-table-site="YOUR-PRICING-TABLE-SITE"
></div>

1
2
3
4
5

# 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

const chargebee = window.Chargebee.init({
   site: "YOUR-CHARGEBEE-SUBDOMAIN",
});

1
2
3

# 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();

# 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

window.Pricify.init();

# After

pricingTable.init();

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 parameter options.pricingPageId with options.pricingTableId.

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 = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setVisitor(data,options);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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`	`data-pricing-table-site`
`data-pricify-pricingpage`	`data-pricing-table-id`
`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`

# Additional resources

← Pricing Table Quickstart Cancel Page Quickstart →

# Migrate from Pricify.js

# Reasons to migrate

# Change summary

# Render without session

# Before (Pricify.js)

# After (Chargebee.js)

# Render with session

# Before (Pricify.js)

# After (Chargebee.js)

# Detailed migration steps

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

# Before

# After

# 2. Replace the DOM container

# Before

# After

# 3. Initialize Chargebee.js

# Before

# After

# 4. Create the Pricing Table object

# Before

# After

# 5. Replace pricing table rendering function

# Option A: Render without session

# Before

# After

# Option B: Render with session

# Before

# After

# 6. Replace other pricing table functions

# Before

# After

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

# Additional resources

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

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