Frontend Capabilities

# Pricing Table Quickstart

This guide helps you set up a Chargebee Pricing Table into your application or website to enable new customers to sign up. This guide features a simple frontend integration using the Chargebee.js SDK.

# 1. Prerequisites

Follow this guide (opens new window) to sign up to Chargebee Billing, set up the product catalog, and customize your pricing table.

# 2. Create a <div> for rendering the pricing table

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

<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. Load Chargebee.js

Load Chargebee.js by adding the following script to the <head> element of the page that renders the pricing table.

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

# 4. Initialize Chargebee.js

Once the page loads, initialize Chargebee.js with your Chargebee site subdomain, and (if applicable) the ID of the business entity (opens new window) within Chargebee Billing, to enable the use of the SDK.

const chargebee = window.Chargebee.init({
  site: "YOUR-CHARGEBEE-SUBDOMAIN",
  businessEntityId: "CHARGEBEE-BUSINESS-ENTITY-ID"
});
1
2
3
4

# 5. Create the Pricing Table object

Use the pricingTable() function to instantiate Pricing Table.

const pricingTable = await chargebee.pricingTable();
1

# 6. Render the pricing table

Call the pricingTable.init() function to render the pricing table at the <div> elements.

pricingTable.init();
1

← Overview →