Pricing Table Quickstart

A Chargebee pricing table is a responsive, configurable pricing page that stays in sync with your product catalog and lets new customers sign up. This guide walks through embedding one in your application or website with the Chargebee.js SDK.

1. Prerequisites

Follow the launch guide to set up your product catalog and to create and customize your pricing table.

2. Create a div for rendering the pricing table

Create a placeholder <div> with its id set to chargebee-pricing-table. If you render multiple pricing tables on the same page, keep the id the same for all of them.

Set the data-pricing-table-key attribute to the ID of the pricing table you want to render. To find this ID, see Obtain the pricing table ID.

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

3. Load Chargebee.js

Add the following script to the <head> element of the page that renders the pricing table.

Set the defer attribute so that Chargebee.js executes before the DOMContentLoaded event and does not block HTML parsing.

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

4. Initialize Chargebee.js

Once the page DOM has loaded, initialize Chargebee.js with your Chargebee site subdomain and, if applicable, the ID of the business entity within Chargebee Billing. Keep the Pricing Table setup from steps 5 and 6 in the same DOMContentLoaded callback so chargebee stays in scope.

document.addEventListener('DOMContentLoaded', async function() {
  const chargebee = window.Chargebee.init({
    site: "YOUR-CHARGEBEE-SUBDOMAIN",
    businessEntityId: "CHARGEBEE-BUSINESS-ENTITY-ID"
  });

  // Step 5: create the Pricing Table object
  const pricingTable = await chargebee.pricingTable();

  // Step 6: render the pricing table
  pricingTable.init();
});

5. Create the Pricing Table object

Use the pricingTable() function to instantiate Pricing Table inside the DOMContentLoaded callback from step 4:

const pricingTable = await chargebee.pricingTable();

6. Render the pricing table

Call the pricingTable.init() function inside the same callback to render the pricing table into the <div> elements:

pricingTable.init();

Next steps

Pricing Table reference for the full parameter list and remaining methods, including session-based rendering and visitor information.
Migrate Pricing Tables from Pricify.js if you have an existing Atomic Pricing integration.