# Pricing Table Migration Guide

This guide shows you how to migrate an existing integration that used the deprecated Pricify.js (opens new window) NPM package to the Chargebee.js Pricing Table integration.

# Reasons to migrate

The Pricify.js package is deprecated and will no longer receive updates. Migrating to the new Chargebee.js Pricing Table integration ensures you benefit from:

Ongoing support and updates: The new integration is actively maintained and receives the latest features and security updates.
Unified integration experience: You only call Chargebee.init() once, and the returned chargebee object can be reused across Chargebee.js features.
Centralized configuration: Set common context such as site and businessEntityId when creating the chargebee object, instead of configuring them separately for each feature (like Pricing Table).
Access to all hosted features: Use the chargebee object to access all of Chargebee's hosted features, including Checkout, Portal, Payment Components, Cancel Page, Personalized Offers, Pricing Table, and more.

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

← API Reference Pricing Table Quickstart →

# Pricing Table Migration Guide

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

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

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