# Pricing Table Object

> **Previous Version**
>
> The earlier version of Pricing Table was available as the [Pricify.js](https://www.npmjs.com/package/@chargebee/atomicpricing) NPM package. That package has since been deprecated. See [Migrate Pricing Tables from Pricify.js](https://www.chargebee.com/tutorials/pricing-table-migration-guide/).

A Pricing Table instance is used to create dynamic, low-code [pricing table](https://www.chargebee.com/docs/growth/offers/pricing-tables) that are always up-to-date with your latest [product catalog](https://www.chargebee.com/docs/billing/2.0/product-catalog/product-catalog) information.

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

[Create a `pricingTable` object](https://www.chargebee.com/docs/js/cbinstanceobj-api-ref#pricingtable) using the `chargebee` object to use the functions listed below.

## Tutorials

For a step-by-step integration, see the [Pricing Tables tutorials](https://www.chargebee.com/tutorials/topics/pricing-tables/).

## Render a static pricing table

### `init()`

Initializes and renders the pricing table based on static configuration attributes set on the pricing page `<div>`. You must set [`data-pricing-table-key`](#data-pricing-table-key) on the `<div>`.

> **Note**
>
> Do not use `init()` together with [`open()`](#render-a-pricing-table-session).

### Examples

#### Render a pricing table

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

```js
pricingTable.init();
```

#### Handle plan CTA clicks

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

```js
pricingTable.init({
  onCtaClick: (payload) => {
    console.log('The visitor selected', payload.ctaConfig.billingSystemItemPriceId);
  },
});
```

### Parameters

- `data` (Object) Configuration for the pricing tables being rendered.
  - `onCtaClick` (Function) A function that Chargebee calls when a visitor clicks a plan CTA whose Button Text & Behavior setting is Trigger JS Callback. The function receives the CTA click payload as its only argument and can return a promise.

### Returns

None.

## Render a pricing table session

### `open()`

Renders the pricing table using a [`pricing_page_session` object](https://apidocs.chargebee.com/docs/api/pricing_page_sessions). Use this function to render the pricing page using session context for a returning customer. The pricing table is only rendered at the `<div>` where [`data-pricing-table-integration-type = api`](#data-pricing-table-integration-type) is set.

> **Note**
>
> Do not use `open()` together with [`init()`](#render-a-static-pricing-table).

### Examples

#### Render a pricing table session

```html
<div
  id="chargebee-pricing-table"
  data-pricing-table-integration-type="api"
></div>
```

```js
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());
  },
});
```

#### Handle plan CTA clicks

```html
<div
  id="chargebee-pricing-table"
  data-pricing-table-integration-type="api"
></div>
```

```js
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());
  },
  onCtaClick: (payload) => {
    console.log('The visitor selected', payload.ctaConfig.billingSystemItemPriceId);
  },
});
```

### Parameters

- `data` (Object, required)
  - `pricingTable` (Function, required) A function that returns a promise that resolves to a `pricing_page_session` object.
  - `onCtaClick` (Function) A function that Chargebee calls when a visitor clicks a plan CTA whose Button Text & Behavior setting is Trigger JS Callback. The function receives the CTA click payload as its only argument and can return a promise.

### Returns

None.

## Handle plan CTA clicks in JavaScript

### `onCtaClick()` callback

A callback function that is called when a visitor clicks a call-to-action (CTA) for a plan that is configured for a JavaScript callback. Use this callback when your application creates the subscription itself, or when the visitor must complete a step outside the pricing page before they can subscribe.

Pass the function to [`init()`](#render-a-static-pricing-table) or [`open()`](#render-a-pricing-table-session). When a visitor clicks a plan CTA that is configured for a JavaScript callback, the pricing table calls your function with a payload describing the selected plan, and does nothing else. Your application decides what happens next.

> **Prerequisite**
>
> The plan's **Button Text & Behavior** [setting](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior) must be **Trigger JS Callback**. Plans set to **Open Checkout** or **Redirect to URL** keep that behavior and do not call this function, so you can mix behaviors on the same pricing table.

After a visitor clicks the CTA, the pricing table disables it for a few seconds to prevent duplicate clicks. Because the pricing table shows no progress of its own, use [`showLoader()`](#show-a-loader) to tell the visitor what your application is doing.

If your function throws an error, or returns a promise that rejects, Chargebee logs the error and the pricing page continues to run. Handle errors within the function to show the visitor what went wrong.

### Example

The following example shows a loader while the application creates a subscription. It sends the visitor to a confirmation page when the request succeeds, and hides the loader whether the request succeeds or fails.

```js
async function handleCtaClick(payload) {
  pricingTable.showLoader({
    header: 'Setting things up',
    subheader: 'This will just take a moment...',
  });

  try {
    const response = await fetch('https://YOUR_DOMAIN/create_subscription', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        itemPriceId: payload.ctaConfig.billingSystemItemPriceId,
        quantity: payload.ctaConfig.quantity,
      }),
    });

    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }

    window.location.href = 'https://YOUR_DOMAIN/welcome';
  } catch (error) {
    console.error('Could not create the subscription:', error);
    // Show an error message from your own application.
  } finally {
    pricingTable.showLoader(false);
  }
}

pricingTable.init({
  onCtaClick: handleCtaClick,
});
```

### Parameters

- `payload` (Object, required) Details of the plan the visitor selected and the context in which they selected it.
  - `event` (String) The name of the event. The only value is `pricing_page_cta_clicked`.
  - `sessionId` (String) The `id` of the `pricing_page_session` object. Present only for a pricing table rendered with `open()`.
  - `pricingPageKey` (String) The pricing table ID of the pricing page on which the CTA was clicked.
  - `customerId` (String) The ID of the customer that the pricing page session was created for.
  - `subscriptionId` (String) The ID of the subscription that the visitor is currently subscribed to.
  - `subscriptionStatus` (String) The status of the subscription that the visitor is currently subscribed to.
  - `ctaConfig` (Object, required) The plan and quantity that the visitor selected.
    - `ctaSource` (String) The part of the pricing page that the CTA was clicked on. Allowed: `card`, `order_summary`.
    - `billingSystemItemPriceId` (String) The item price ID of the selected plan in Chargebee Billing. Use this value to create the subscription.
    - `billingSystemItemId` (String) The item ID that the selected item price belongs to.
    - `quantity` (Number) The quantity that the visitor selected for the plan.
    - `currency` (String) The currency that the pricing page was displaying when the CTA was clicked.
    - `priceFrequency` (Object) The billing frequency of the selected plan.
      - `period` (Number) The number of time intervals that make up a billing cycle.
      - `periodUnit` (String) The unit of time for the billing cycle. For example, `month`.
    - `pricingModel` (String) The pricing model of the selected item price.
    - `isSubscribedPrice` (Boolean) Whether the visitor is already subscribed to the selected item price.
    - `lineItems` (Array<Object>) The addons and charges that apply to the selected plan.
      - (Object)
        - `type` (String) The kind of line item. Allowed: `mandatory_addon`, `recommended_addon`, `charge`.
        - `billingSystemItemPriceId` (String) The item price ID of the line item in Chargebee Billing.
        - `quantity` (Number) The quantity of the line item.
        - `currency` (String) The currency of the line item.
        - `priceFrequency` (Object) The billing frequency of the line item. Omitted for one-time charges.
          - `period` (Number) The number of time intervals that make up a billing cycle.
          - `periodUnit` (String) The unit of time for the billing cycle. For example, `month`.

### Returns

Chargebee ignores the value that your function returns.

## Show a loader

### `showLoader()`

Shows or hides a loader that covers the pricing page, with optional text. Use this function to report progress while your [`onCtaClick()`](#handle-plan-cta-clicks-in-javascript) function runs.

![showLoader example](https://www.chargebee.com/docs/js/assets/images/showLoader.png)

The loader has no timeout. It stays visible until you hide it, so hide it explicitly using `showLoader(false)` when your processing finishes or fails.

### Examples

#### Show the loader without text

```js
pricingTable.showLoader(true);
```

#### Show the loader with text

```js
pricingTable.showLoader({
  header: 'Almost done',
  subheader: 'This will take a moment...',
});
```

#### Hide the loader

```js
pricingTable.showLoader(false);
```

### Parameters

- `data` (Object) Whether to show the loader, and the text to display on it. Pass `true` to show the loader without text, or an object to show it with text. Pass `false` or `null`, or omit this parameter, to hide the loader. Default value is `false`.
  - `header` (String) The heading to display on the loader. For example, `Setting things up`.
  - `subheader` (String) The text to display below the heading. For example, `This will just take a moment...`.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set visitor information 

### `setVisitor()`

Sets [customer](https://apidocs.chargebee.com/docs/api/customers)-related parameters to be passed to [Chargebee Checkout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout) or included in the redirect URL from the pricing table.

How these parameters are used depends on the **Button Text & Behavior** [setting](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior) 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](https://apidocs.chargebee.com/docs/api/customers/update-a-customer).
- **Redirect to URL**: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding [placeholder variables](https://www.chargebee.com/docs/growth/offers/launch-pricing-table#i-am-using-the-redirect-to-url-option-for-the-button-behavior-can-the-pricing-page-automatically-populate-variables-such-as-plan-id-in-the-custom-url).
- **Trigger JS Callback**: The parameters are not included in the [`onCtaClick()`](#handle-plan-cta-clicks-in-javascript) payload. Read them from your own application instead.

### Examples

#### Set customer details for all pricing pages

```js
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);
```

#### Set customer details for a specific pricing page

```js
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 = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setVisitor(data,options);
```

### Parameters

- `data` (Object, required) Customer-related parameters.
  - `firstName` (String)
  - `lastName` (String)
  - `email` (String)
  - `phone` (String)
  - `customFields` (Object) An object containing customer-level custom fields and their values.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set billing address

### `setBillingAddress()`

Sets [customer billing address](https://apidocs.chargebee.com/docs/api/customers#customer_billing_address) parameters to be passed to [Chargebee Checkout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout) or included in the redirect URL from the pricing table.

How these parameters are used depends on the **Button Text & Behavior** [setting](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior) 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](https://apidocs.chargebee.com/docs/api/customers/update-billing-info-for-a-customer).
- **Redirect to URL**: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding [placeholder variables](https://www.chargebee.com/docs/growth/offers/launch-pricing-table#i-am-using-the-redirect-to-url-option-for-the-button-behavior-can-the-pricing-page-automatically-populate-variables-such-as-plan-id-in-the-custom-url).

### Examples

#### Set billing address for all pricing pages

```js
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);
```

#### Set billing address for a specific pricing page

```js
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 = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setBillingAddress(data,options);
```

### Parameters

- `data` (Object, required) Customer billing address parameters.
  - `firstName` (String)
  - `lastName` (String)
  - `email` (String)
  - `phone` (String)
  - `company` (String)
  - `line1` (String)
  - `line2` (String)
  - `line3` (String)
  - `city` (String)
  - `stateCode` (String)
  - `state` (String)
  - `zip` (String)
  - `country` (String)
  - `validationStatus` (String) Allowed: `valid`, `partially_valid`, `invalid`, `not_validated`.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

### `setShippingAddress(shippingAddress)`

Sets [subscription shipping address](https://apidocs.chargebee.com/docs/api/subscriptions#subscription_shipping_address) parameters to be passed to [Chargebee Checkout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout) or included in the redirect URL from the pricing table.

How these parameters are used depends on the **Button Text & Behavior** [setting](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior) 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](https://apidocs.chargebee.com/docs/api/subscriptions/update-subscription-for-items).
- **Redirect to URL**: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding [placeholder variables](https://www.chargebee.com/docs/growth/offers/launch-pricing-table#i-am-using-the-redirect-to-url-option-for-the-button-behavior-can-the-pricing-page-automatically-populate-variables-such-as-plan-id-in-the-custom-url).

### Examples

#### Set shipping address for all pricing pages

```js
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);
```

#### Set shipping address for a specific pricing page

```js
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 = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setShippingAddress(data,options);
```

### Parameters

- `data` (Object, required) Customer billing address parameters.
  - `firstName` (String)
  - `lastName` (String)
  - `email` (String)
  - `phone` (String)
  - `company` (String)
  - `line1` (String)
  - `line2` (String)
  - `line3` (String)
  - `city` (String)
  - `stateCode` (String)
  - `state` (String)
  - `zip` (String)
  - `country` (String)
  - `validationStatus` (String) Allowed: `valid`, `partially_valid`, `invalid`, `not_validated`.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set quantity

### `setQuantity()`

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

> **Tip**
>
> [Enable](https://www.chargebee.com/docs/growth/offers/customize-pricing-table) the quantity slider to allow users to change the quantity value.

### Examples

#### Set quantity for all pricing pages

```js
pricingTable.setQuantity(10);
```

#### Set quantity for a specific pricing page

```js
const quantity = 10;
const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setQuantity(quantity,options);
```

### Parameters

- `quantity` (Number, required) The quantity to be set for plans on the pricing table.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set business entity

### `setBusinessEntity()`

Sets the [business entity](https://apidocs.chargebee.com/docs/api/business_entities) to use for creating customer and subscription records in Chargebee Billing. If a business entity was set when [creating](https://www.chargebee.com/docs/js/cb-library-api-ref#init) the Chargebee object, this method overrides it.

### Examples

#### Set business entity for all pricing pages

```js
pricingTable.setBusinessEntity('acme-eu');
```

#### Set business entity for a specific pricing page

```js
const businessEntityId = 'acme-eu';
const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setBusinessEntity(businessEntityId,options);
```

### Parameters

- `businessEntityId` (String, required) The unique ID of the business entity.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set price variant

### `setPriceVariant()`

Sets the [price variant](https://www.chargebee.com/docs/2.0/variant-pricing-overview.html) 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.

> **Call before rendering the pricing table**
>
> Call `setPriceVariant()` before [`init()`](#render-a-static-pricing-table) or [`open()`](#render-a-pricing-table-session).

### Examples

#### Set a price variant for a static pricing table

```js
pricingTable.setPriceVariant('size-m');
pricingTable.init();
```

#### Set a price variant for a specific pricing page

```js
const priceVariantId = 'size-m';
const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setPriceVariant(priceVariantId, options);
pricingTable.init();
```

#### Set a price variant for a pricing table session

```js
pricingTable.setPriceVariant('size-m');

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());
  },
});
```

### Parameters

- `priceVariantId` (String, required) The unique ID of the price variant.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Set subscription attributes

### `setSubscriptionAttributes()`

Sets [subscription](https://apidocs.chargebee.com/docs/api/subscriptions)-level [custom fields](https://apidocs.chargebee.com/docs/api/advanced-features#custom_fields) 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](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior) 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](https://apidocs.chargebee.com/docs/api/subscriptions/update-subscription-for-items).
- **Redirect to URL**: The parameters are added to the query string of the redirect URL, provided the redirect URL template includes corresponding [placeholder variables](https://www.chargebee.com/docs/growth/offers/launch-pricing-table#i-am-using-the-redirect-to-url-option-for-the-button-behavior-can-the-pricing-page-automatically-populate-variables-such-as-plan-id-in-the-custom-url).

### Examples

#### Set subscription fields for all pricing pages

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

pricingTable.setSubscriptionAttributes(data);
```

#### Set subscription fields for a specific pricing page

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

const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.setSubscriptionAttributes(data,options);
```

### Parameters

- `data` (Object, required)
  - `customFields` (Object) An object containing one or more subscription-level custom fields and their values.
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Show total price

### `showTotalPrice()`

Displays the total price payable for the selected plan(s) when the **Show price per month** [feature](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#customizing-frequency) is enabled for the pricing table.

For example, if you have a 3-month plan priced at $90 with **Show price per month** enabled, the Pricing Table displays "$30/month". With `showTotalPrice()`, you can also display the total price ($90) alongside the monthly price.

> **Prerequisite**
>
> The **Show price per month** [feature](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#customizing-frequency) must be enabled for the pricing table.

### Examples

The following screenshot shows how the total price is displayed on a sample pricing table.

![showTotalPrice example.](https://www.chargebee.com/docs/js/assets/images/show_total_price.png)

The following code snippets implement the feature shown in the image above.

#### Show total price for all pricing pages

```js
const data = [
  {
    prefix: "Total quarterly price is",
    periodUnit: "month",
    period: 3,
    suffix: "only"
  },
  {
    periodUnit: "year",
    period: 1,
    prefix: "Total Price"
  }
];

pricingTable.showTotalPrice(data);
```

#### Show total price for a specific pricing page

```js
const data = [
  {
    prefix: "Total quarterly price is",
    periodUnit: "month",
    period: 3,
    suffix: "only"
  },
  {
    periodUnit: "year",
    period: 1,
    prefix: "Total Price"
  }
];

const options = {
  pricingPageKey: 'BpQVReCOGP',
};

pricingTable.showTotalPrice(data,options);
```

### Parameters

**Parameters**

- `data` (Array<Object>, required) An array of objects, each specifying how to display the total price for a plan with a specific billing period.
  - (Object)
    - `prefix` (String) Text to display before the total price. Default value is 'Total Price'. Example: 'Total quarterly price is'
    - `periodUnit` (String, required) The billing period unit. Valid values: 'month', 'year'. Note: 'day' and 'week' are not supported as the function only works for billing periods longer than 1 month.
    - `period` (Number, required) The billing period length. Must be greater than 1 when periodUnit is 'month' (e.g., 3 for a 3-monthly plan). When periodUnit is 'year', any positive number is valid.
    - `suffix` (String) Text to display after the total price. Example: 'only' or 'billed every 3 months'
- `options` (Object) Identifies the pricing table to target. Omit this parameter to target every pricing table on the web page.
  - `pricingPageKey` (String) The pricing table ID set as the `data-pricing-table-key` attribute of the pricing table `<div>`. For a pricing table rendered with `open()`, pass the `id` of the `pricing_page_session` object instead.

### Returns

None.

## Data attributes

The following [data-* attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-*) can be set on the pricing table `<div>`.

#### `data-pricing-table-key`

Required when [`data-pricing-table-integration-type`](#data-pricing-table-integration-type) is not set and when calling [`pricingTable.init()`](#render-a-static-pricing-table). Specifies the unique ID of your pricing table. To find this ID, see the [documentation](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#obtain-the-pricing-table-id).

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](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units):  `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](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#customizing-currency) 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()`](#render-a-pricing-table-session). Do not set `data-pricing-table-key` when using this attribute; the session identifies the pricing table. 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](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/ga4-gtm-full-page#get-your-gtm-id-from-your-google-tag-manager-account) (format: `GTM-xxxxx`) for the pricing table and, [if applicable](https://www.chargebee.com/docs/growth/offers/customize-pricing-table#button-text-and-behavior), the [Checkout](https://www.chargebee.com/docs/billing/2.0/hosted-capabilities/hosted-checkout) pages.