Show existing customers a personalized pricing table

Overview

In this tutorial, you'll learn how to display a Chargebee pricing table for existing customers in your application using Chargebee Growth Plays. This approach lets you create pricing page sessions securely on the server and render them in a dedicated container using Chargebee.js.

This tutorial is intended for developers building a web app (e.g. JavaScript, React, Vue, or Angular) with a backend that can call Chargebee's API.

By the end of this tutorial, you'll be able to:

Include and initialize Chargebee.js on the frontend with the correct site configuration.
Add a container <div> with the parameters required for API-driven pricing tables.
Call the Pricing Page Session API from your backend for existing subscriptions.
Pass a custom attribute so Growth can target the right pricing table—for example, splitting users between a control and a test table in a pricing experiment.
Request a pricing table session from the frontend and render it using Chargebee.js open().

Background

Chargebee.js is a client-side library that lets you embed Chargebee components (such as pricing tables and Checkout) in your frontend. You load the script, initialize it with your site, and use methods like pricingTable.open() to display a pricing table.
Pricing Page Sessions are created via the Chargebee REST API on the server for existing subscriptions (plan changes, upgrades, downgrades). The API returns a pricing table object based on Play configurations in Chargebee Growth. Chargebee.js uses this object to render the table.
By keeping session creation on the backend, you never expose your Chargebee API key to the browser; the frontend only receives the session payload and passes it to Chargebee.js.

Before you start

Before you start the tutorial, you should:

Have a Chargebee Billing account and a Chargebee Growth account.
Have one or more pricing tables created in Chargebee Growth and associated them with one or more Plays in Chargebee Growth.
Obtain a full-access API key from your Chargebee Billing test site (required for the Pricing Page Session API).
Have a running frontend and backend so you can add the script, a backend endpoint, and a frontend call to fetch the session and open the pricing table.

Step 1: Integrate the Chargebee REST API (Backend)

Use the Chargebee REST API from your backend to create pricing page sessions. Chargebee provides client libraries (e.g. PHP, Ruby, Python, Java, .NET, Node, Go) that wrap the HTTP API; use the one that matches your stack.

Configure your client with your Chargebee Billing site and full-access API key. Never expose the API key to the frontend.

Then implement a POST endpoint that:

Accepts a request from the frontend with the subscription_id.
Computes the targeting attribute on the server (for example, the subscriber's plan_usage_percent) and builds the custom object.
Calls the Create pricing page for existing subscription API, passing the custom attribute so Growth can evaluate your Play's audience rules and return the matching pricing table.
Returns the pricing page session object to the frontend as JSON.

The custom parameter is a JSON object of custom attributes (key-value pairs) used for pricing page targeting. For the pricing experiment for free users, compute the signal your audience matches on—say, how close the free user is to their plan limit, as a percentage (plan_usage_percent)—and send it so Growth can place them in the experiment and show the control or test table. Map this field in Growth before you use it in audience rules; unmapped fields are ignored.

// Example: Express route that creates a pricing page session for an existing subscription
app.post("/api/create_pricing_table", async (req, res) => {
  const chargebee = require("chargebee");
  chargebee.configure({ site: "YOUR_SITE", api_key: "YOUR_API_KEY" });

  const subscriptionId = req.body.subscription_id; // Required: existing subscription ID
  if (!subscriptionId) {
    return res.status(400).json({ error: "subscription_id is required" });
  }

  try {
    // Compute the targeting attribute on the server, then pass it as `custom`.
    const custom = { plan_usage_percent: await getPlanUsagePercent(subscriptionId) };

    const result = await chargebee.pricing_page_session
      .create_for_existing_subscription({
        subscription: { id: subscriptionId },
        custom, // Growth uses this attribute to match the Play audience and pick the pricing table.
      })
      .request();

    res.json(result.pricing_page_session);
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: error.message });
  }
});

// Stub: replace with a real lookup of the subscriber's usage relative to their plan limit.
async function getPlanUsagePercent(subscriptionId) {
  // e.g. read metered usage / entitlements for this subscription and return a 0-100 value
  return 95;
}

import chargebee
chargebee.configure("your_site_domain", "your_api_key")

@app.route('/api/create_pricing_table', methods=['POST'])
def create_pricing_page_session():
    data = request.get_json() or {}
    subscription_id = data.get("subscription_id")  # Required
    if not subscription_id:
        return jsonify({"error": "subscription_id is required"}), 400
    # Compute the targeting attribute on the server, then pass it as `custom`.
    custom = {"plan_usage_percent": get_plan_usage_percent(subscription_id)}
    result = chargebee.PricingPageSession.create_for_existing_subscription({
        "subscription": {"id": subscription_id},
        "custom": custom,  # Growth matches this against your Play audience to pick the table.
    })
    pricing_page_session = result._response['pricing_page_session']
    return jsonify(pricing_page_session)


# Stub: replace with a real lookup of the subscriber's usage relative to their plan limit.
def get_plan_usage_percent(subscription_id):
    # e.g. read metered usage / entitlements for this subscription and return a 0-100 value
    return 95

ChargeBee.configure(site: "your_site_domain", api_key: "your_api_key")

post "/api/create_pricing_table" do
  subscription_id = params[:subscription_id]  # Required
  return { error: "subscription_id is required" }.to_json, 400 unless subscription_id

  # Compute the targeting attribute on the server, then pass it as `custom`.
  custom = { plan_usage_percent: plan_usage_percent(subscription_id) }

  result = ChargeBee::PricingPageSession.create_for_existing_subscription(
    subscription: { id: subscription_id },
    custom: custom  # Growth matches this against your Play audience to pick the table.
  )
  content_type :json
  result.pricing_page_session.to_json
end

# Stub: replace with a real lookup of the subscriber's usage relative to their plan limit.
def plan_usage_percent(subscription_id)
  # e.g. read metered usage / entitlements for this subscription and return a 0-100 value
  95
end

Environment.configure("your_site_domain", "your_api_key");

// In your controller/servlet (e.g. POST /api/create_pricing_table):
String subscriptionId = request.getParameter("subscription_id"); // Required
if (subscriptionId == null || subscriptionId.isEmpty()) {
  response.setStatus(400);
  return;
}
// Compute the targeting attribute on the server; Growth matches it against your Play audience.
int planUsagePercent = getPlanUsagePercent(subscriptionId);
Result result = PricingPageSession.createForExistingSubscription()
    .subscriptionId(subscriptionId)
    .param("custom[plan_usage_percent]", planUsagePercent)
    .request(new Environment("your_site_domain", "your_api_key"));

PricingPageSession pricingPageSession = result.pricingPageSession();
response.setContentType("application/json");
response.getWriter().print(pricingPageSession.jsonObj);

// Stub: replace with a real lookup of the subscriber's usage relative to their plan limit.
int getPlanUsagePercent(String subscriptionId) {
  // e.g. read metered usage / entitlements for this subscription and return a 0-100 value
  return 95;
}

ChargeBee_Environment::configure("your_site_domain", "your_api_key");

// Route: POST create_pricing_table
public function createPricingPageSession(Request $request) {
    $subscriptionId = $request->input("subscription_id");  // Required
    if (!$subscriptionId) {
        return response()->json(["error" => "subscription_id is required"], 400);
    }
    // Compute the targeting attribute on the server, then pass it as `custom`.
    $custom = ["plan_usage_percent" => $this->getPlanUsagePercent($subscriptionId)];
    $result = ChargeBee_PricingPageSession::createForExistingSubscription([
        "subscription" => ["id" => $subscriptionId],
        "custom" => $custom,  // Growth matches this against your Play audience to pick the table.
    ]);
    $session = $result->pricingPageSession();
    return response()->json($session->getValues(), 200);
}

// Stub: replace with a real lookup of the subscriber's usage relative to their plan limit.
private function getPlanUsagePercent($subscriptionId) {
    // e.g. read metered usage / entitlements for this subscription and return a 0-100 value
    return 95;
}

Ensure your backend returns the pricing page session object and that the response is JSON. The frontend will send this payload to Chargebee.js in the next step.

Step 2: Request a pricing table and open it (Frontend)

From the frontend, request a pricing table session from your backend and pass the result to Chargebee.js so it can render the table inside the container <div>.

1. Load the Chargebee.js script – Load the Chargebee.js script and initialize it with your Chargebee Billing site.

2. Call your backend – When the user should see the pricing table (e.g. on page load or when clicking “View plans”), send a POST request to your endpoint (e.g. /api/create_pricing_table) with only the subscription_id in the request body. The backend computes the targeting attribute(s) (plan_usage_percent) and adds it as custom before calling Chargebee.

3. Return a Promise that resolves to the session – The pricingTable.open() method expects a pricingTable option that is a function returning a Promise that resolves to the pricing page session object. Typically this function calls your backend and returns response.json().

4. Call pricingTable.open() – Get the pricing table component from your Chargebee instance, then call open() with that function. Chargebee.js will use the resolved session to render the table in the div with id="chargebee-pricing-table".

<script src="https://js.chargebee.com/v2/chargebee.js" onload="onLoad()"></script>

<script>
async function onLoad() {
const chargebee = Chargebee.init({
    site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
})
const pricingTable = await chargebee.pricingTable();
pricingTable.open({
  pricingTable: function() {
    return fetch('https://YOUR_DOMAIN/api/create_pricing_table', {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        subscription_id: "SUBSCRIPTION_ID",  // Required
      }),
    }).then(response => response.json());
  },
});
</script>

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

import React, { useEffect } from 'react';
import Chargebee from 'chargebee';

function PricingPage() {

useEffect(() => {
  const cbInstance = Chargebee.init({
      site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
  })
  const pricingTable = await cbInstance.pricingTable();
    
  pricingTable.open({
      pricingTable: function() {
          return fetch('https://YOUR_DOMAIN/api/create_pricing_table', {
            method: "POST",
            headers: {
              "Content-Type": "application/json"
            },
            body: JSON.stringify({
              subscription_id: "SUBSCRIPTION_ID",  // Required
            }),
          }).then(response => response.json()),
      },
  });
}, []);

return (
  <div className="App">
    <div
      id="chargebee-pricing-table"
      data-pricing-table-integration-type="api"
    ></div>
  </div>
);
}

export default PricingPage;

<script setup lang="tsx">
import Chargebee from 'chargebee';
import { onMounted } from 'vue';
onMounted(() => {
    const cbInstance = Chargebee.init({
        site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
    })
    const pricingTable = await cbInstance.pricingTable();
    pricingTable.open({
    pricingTable: function() {
      return fetch('https://YOUR_DOMAIN/api/create_pricing_table', {
              method: "POST",
              headers: {
                "Content-Type": "application/json"
              },
              body: JSON.stringify({
                subscription_id: "SUBSCRIPTION_ID",  // Required
              }),
            }).then(response => response.json()),
          },
      });
});
</script>

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

import { Component } from '@angular/core';
import Chargebee from 'chargebee';

@Component({
    selector: 'pricing-page-component',
    templateUrl: './pricing-page.component.html',
    styleUrls: ['./pricing-page.component.css'],
})
export class PricingPageComponent {
    title = 'pricing-page-component';
    params: { [index: string]: any } = {};
    ngOnInit() {
        const cbInstance = Chargebee.init({
            site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
        })
        const pricingTable = await cbInstance.pricingTable();
            pricingTable.open({
                pricingTable: function() {
                    return fetch('https://YOUR_DOMAIN/api/create_pricing_table', {
                              method: "POST",
                              headers: {
                                "Content-Type": "application/json"
                              },
                              body: JSON.stringify({
                                subscription_id: "SUBSCRIPTION_ID",  // Required
                              }),
                      }).then(response => response.json()),
                  },
              });
    }
}

After this step, the pricing table should appear inside the <div> you configured.

Overview

Background

Before you start

Step 1: Integrate the Chargebee REST API (Backend)

Step 2: Request a pricing table and open it (Frontend)

In this Page

Related reading