Frontend Capabilities

# How to Integrate

In Product Catalog 1.0, products are identified using plan_id and addon_id. However, in Product Catalog 2.0 products are identified using item_price_id.

Also, any associated analytics integrations like Google Analytics or Google Tag Manager start referring to products using item_price_id.

# Integrating Checkout

Similar to Product Catalog 1.0, you can copy the Drop-in script from the Chargebee user interface and embed it in your website’s code. The only difference is the options to select before generating the Checkout Button code.

To generate the Checkout Button code, click Settings > Configure Chargebee > Checkout and Self-Serve Portal > Integrate with Chargebee and select the necessary Product family and Plan. Add Addons and Charges to it. Learn more. (opens new window)

Options to select while generating Drop-in Script:

  • Product family
  • Plan
  • Addons
  • Charges
  • Layout

The Checkout Button code is updated with the selected options.

Copy and embed it in the “Subscribe” on your website or application. See line number 8 in the code below:

  • html

Note:

If you have multiple Business Entities (opens new window) enabled in Chargebee, also include the data-cb-business-entity-id attribute in the script tas as shown in sample code above.

# Cart Customization

The cart Customization feature is recommended if the cart is subject to dynamic quantity changes and additional details collection through custom fields. It offers complete JavaScript to add or remove plans, addons & coupons and update its quantity.

Again, the difference here is subtle. You need to set the flag isItemsModel = true in Product Catalog 2.0. This attribute need not be used while on Product Catalog 1.0.

Further, you can get the required values of Plan Price Point ID, Addon Price Point ID and many more from Chargebee, and use them as inputs while opening the checkout window.

Learn more about Cart objects.

  • html

TIP

If you are still using the drop-in script to integrate checkout in product catalog 1.0 (opens new window), click here.

# Integrating Portal

You can copy the Drop-in script from the Chargebee user interface and embed it in your website’s code.

To generate the portal button code, click Settings > Configure Chargebee > Checkout and Self-Serve Portal > Integrate with Chargebee

Copy and embed it in the Portal button snippet on your website or application.

See line number 14 in the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="http://js.chargebee.com/v2/chargebee.js"
      data-cb-site="acme-test"
    ></script>
  </head>
  <body>
    <a href="javascript:void(0)" data-cb-type="portal">Open customer portal</a>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

← Tutorial: Drop-in Checkout →