Frontend Capabilities

# Pricing Table ✨

Previous Version

The earlier version of Pricing Table was available as the @chargebee/atomicpricing (opens new window) NPM package. That package has since been deprecated.

# Introduction

Pricing Table (opens new window) helps you acquire new customers by embedding responsive, highly configurable pricing pages directly into your application. Use the Chargebee JavaScript SDK to programmatically initialize, display, and configure the pricing table with customer and subscription context. The SDK gives you granular control over customer data and plan configuration before checkout. These tables are rendered on a Chargebee-hosted page, with the option to create sessions via the REST API for secure, contextual rendering.

# Integration guide

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 to enable the use of the SDK.

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

# 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

# Tutorials

See these tutorials (opens new window) for more use cases for pricing table.

# JS API reference

See the Pricing Table JS API reference for more details.

← Personalized Offers ✨ →