Frontend Capabilities

# Pricing Table Object ✨

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.

A Pricing Table instance is used to create dynamic, low-code pricing table (opens new window) that are always up-to-date with your latest product catalog (opens new window) information.

Pricing table is rendered on <div> elements with the id set to chargebee-pricing-table.

Create a pricingTable object using the chargebee object to use the functions listed below.

# Create and render a pricing table

# init()

Initializes and renders the pricing table based on the attributes set on the pricing page <div>. This functions requires the attributes data-pricing-table-id and data-pricing-table-site to be set on the <div>.

# Example

pricingTable.init();
1

# Parameters

None.

# Returns

None.

# Render a pricing table session

# open()

Renders the pricing table using a pricing_page_session object (opens new window). This function is useful when you want to render the pricing page using using session context for a returning customer. The pricing table is only rendered at the <div> where data-pricing-table-integration-type = api is set.

# Example

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

# Parameters

data
Object Required View properties

# Returns

None.

# Set visitor information

# setVisitor()

Sets customer (opens new window)-related parameters to be passed to Chargebee Checkout (opens new window) or included in the redirect URL from the pricing table.

How these parameters are used depends on the Button Text & Behavior setting (opens new window) for the pricing table:

  • Open Checkout: These parameters are passed to Checkout and used to populate the new customer record in Chargebee Billing. Note: This does not update existing customer records. To update a customer, use the Update a customer API (opens new window).
  • Redirect to URL: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding placeholder variables (opens new window).

# Examples

# Set customer details for all pricing pages

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@example.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  customFields: {
    cf_visit_count: 13,
  },
};

pricingTable.setVisitor(data);
1
2
3
4
5
6
7
8
9
10
11
12

# Set customer details for a specific pricing page

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

# Parameters

data
Object Required View properties
Customer-related parameters.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set billing adddress

# setBillingAddress()

Sets customer billing address (opens new window) parameters to be passed to Chargebee Checkout (opens new window) or included in the redirect URL from the pricing table.

How these parameters are used depends on the Button Text & Behavior setting (opens new window) for the pricing table:

  • Open Checkout: These parameters are passed to Checkout and used to populate the billing address for the new customer record in Chargebee Billing. Note: This does not update existing customer records. To update a customer’s billing address, use the Update billing info for a customer API (opens new window).
  • Redirect to URL: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding placeholder variables (opens new window).

# Examples

# Set billing address for all pricing pages

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@gmail.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  city: 'Los Angeles',
  stateCode: 'CA',
  country: 'US',
};

pricingTable.setBillingAddress(data);
1
2
3
4
5
6
7
8
9
10
11
12

# Set billing address for a specific pricing page

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@gmail.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  city: 'Los Angeles',
  stateCode: 'CA',
  country: 'US',
};

const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setBillingAddress(data,options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Parameters

data
Object Required View properties
Customer billing address parameters.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set billing address

setShippingAddress()

Sets subscription shipping address (opens new window) parameters to be passed to Chargebee Checkout (opens new window) or included in the redirect URL from the pricing table.

How these parameters are used depends on the Button Text & Behavior setting (opens new window) for the pricing table:

  • Open Checkout: These parameters are passed to Checkout and used to populate the shipping address of the new subscription record in Chargebee Billing. Note: This does not update existing subscription records. To update a subscription’s shipping address, use the Update a subscription API (opens new window).
  • Redirect to URL: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding placeholder variables (opens new window).

# Examples

# Set shipping address for all pricing pages

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@gmail.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  city: 'Los Angeles',
  stateCode: 'CA',
  country: 'US',
};

pricingTable.setShippingAddress(data);
1
2
3
4
5
6
7
8
9
10
11
12

# Set shipping address for a specific pricing page

const data = {
  firstName: 'Jane',
  lastName: 'Doe',
  email: 'jane.doe@gmail.com',
  phone: '+1-123-456-7890',
  company: 'Acme',
  city: 'Los Angeles',
  stateCode: 'CA',
  country: 'US',
};

const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setShippingAddress(data,options);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Parameters

data
Object Required View properties
Customer billing address parameters.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set quantity

# setQuantity()

Sets the initial quantity for all quantity-based plans on the pricing table.

TIP

Enable (opens new window) the quantity slider to allow users to change the quantity value.

# Examples

# Set quantity for all pricing pages

pricingTable.setQuantity(10);
1

# Set quantity for a specific pricing page

const quantity = 10;
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setQuantity(quantity,options);
1
2
3
4
5
6
7

# Parameters

quantity
Number Required
The quantity to be set for plans on the pricing table.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set business entity

# setBusinessEntity()

Sets the business entity (opens new window) to use for creating customer and subscription records in Chargebee Billing. If a business entity was set when creating the Chargebee object, this method overrides it.

# Examples

# Set business entity for all pricing pages

pricingTable.setBusinessEntity('acme-eu');
1

# Set business entity for a specific pricing page

const businessEntityId = 'acme-eu';
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setBusinessEntity(businessEntityId,options);
1
2
3
4
5
6
7

# Parameters

businessEntityId
String Required
The unique ID of the business entity.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set price variant

# setPriceVariant()

Sets the price variant (opens new window) for the plans displayed on the pricing page. If the specified price variant is not available for a plan, the default price variant of the plan is used. If no default price variant exists, the plan is not displayed on the pricing page.

# Examples

# Set price variant for all pricing pages

pricingTable.setPriceVariant('size-m');
1

# Set price variant for a specific pricing page

const priceVariantId = 'size-m';
const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setPriceVariant(priceVariantId,options);
1
2
3
4
5
6
7

# Parameters

priceVariantId
String Required
The unique ID of the price variant.
options
Object View properties
Details of the pricing table to be rendered.

# Returns

None.

# Set subscription attributes

# setSubscriptionAttributes()

Sets subscription (opens new window)-level custom fields (opens new window) to be passed to Chargebee Checkout or included in the redirect URL from the pricing table.

How these parameters are used depends on the Button Text & Behavior setting (opens new window) for the pricing table:

  • Open Checkout: These parameters are passed to Checkout and used to populate the new subscription record in Chargebee Billing. Note: This does not update existing subscription records. To update a subscription’s custom fields, use the Update a subscription API (opens new window).
  • Redirect to URL: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding placeholder variables (opens new window).

# Examples

# Set subscription fields for all pricing pages

const data = {
  customFields: {
    cf_campaign_id: 'monsoon98',
  },
}

pricingTable.setSubscriptionAttributes(data);
1
2
3
4
5
6
7

# Set subscription fields for a specific pricing page

const data = {
  customFields: {
    cf_campaign_id: 'monsoon98',
  },
}

const options = {
  siteId: '01GV57EG6A1V28QR8KYBK8FE3J',
  pricingTableId: '01GV57HY1KM0ZVBSMR7SCV6VDF',
};

pricingTable.setSubscriptionAttributes(data,options);
1
2
3
4
5
6
7
8
9
10
11
12

# Parameters

data
Object Required View properties
options
Object View properties
Details of the pricing table to be rendered.

# Returns

# Data attributes

The following data-* attributes (opens new window) can be set on the pricing table <div>.

# data-pricing-table-id

Required when data-pricing-table-integration-type is not set and when calling pricingTable.init(). Specifies the unique ID of your pricing table. To find this ID, see the documentation (opens new window). Do not set this attribute when data-pricing-table-integration-type = 'api', or the SDK will return an error.

# data-pricing-table-site

Required when data-pricing-table-integration-type is not set and when calling pricingTable.init(). Specifies the unique ID of your pricing table site. To find this ID, see the documentation (opens new window). Do not set this attribute when data-pricing-table-integration-type = 'api', or the SDK will return an error.

# data-pricing-table-viewport-width

Sets the maximum width of the pricing table. Accepts the following CSS units (opens new window): px, em, rem, or % (for example, 100%). If not set, the pricing table uses the width of its containing element.

# data-pricing-table-viewport-height

Sets the maximum height of the pricing table. Accepts the following CSS units: px, em, rem, or % (for example, 100%). If the content exceeds the height, a scrollbar appears; hence setting this attribute is not recommended. If not set, the pricing table uses the height of its containing element.

# data-pricing-table-viewport-default-height

(Default value: 600px) Sets the height of the loading screen shown until the pricing page fully loads. Adjust this value based on expected screen sizes.

# data-pricing-table-currency

Specifies the currency to display on the pricing table (for example, USD). If not set or if set to an invalid value, the first currency listed in the pricing table configuration page (opens new window) is used.

# data-pricing-table-period

Specifies the number of time intervals that make up a billing cycle of the plans to be displayed. Used together with data-pricing-table-period-unit. For example, to display plans with six-month billing cycles, set data-pricing-table-period to 6 and data-pricing-table-period-unit to 'month'. When not set or set to an invalid value, the first period listed in the pricing table configuration page is selected.

# data-pricing-table-period-unit

Specifies the unit of time for the billing cycle of the plans to be displayed. Used with data-pricing-table-period. Valid values are week, month, and year. When not set or set to an invalid value, the first unit listed in the pricing table configuration page is selected.

# data-pricing-table-show-currency-dropdown

(Default: true) Specifies whether to show the currency selector dropdown on the pricing table.

# data-pricing-table-auto-select-local-currency

(Default: false)

  • If set to true: Automatically sets a currency based on the visitor's location. For example, users in the US will see USD if available, and users in India will see INR if available. If the locale-specific currency is not available, the first currency listed in the pricing table configuration page is used.
  • When false, not set, or set to an invalid value: The first currency listed in the pricing table configuration page is used.

# data-pricing-table-integration-type

Set to api to render the pricing table using pricingTable.open(). Do not set data-pricing-table-id or data-pricing-table-site when using this attribute. Do not set this attribute on <div> elements where you want to render using pricingTable.init().

# data-pricing-table-gtm-id

Sets the Google Tag Manager ID (opens new window) (format: GTM-xxxxx) for the pricing table and, if applicable (opens new window), the Checkout (opens new window) pages.

← Personalized Offers Object ✨ →