Frontend Capabilities

# Chargebee library

These are the top level methods exposed by Chargebee.js.

# init()

Initializes the Chargebee object with your site domain name, enabling the use of the SDK.

# Syntax

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

# Parameters

options
Object Required Hide properties
Initialization options.
site
String Required
The subdomain of your Chargebee Billing site. For example, if your site URL is https://acme-test.chargebee.com, set site to acme-test.
domain
String Required if Custom domain is enabled.
Your custom domain, if configured in Chargebee. Chargebee-hosted pages will be served from this domain. For example: Eg: https://billing.yourdomain.com
publishableKey
Boolean
A publishable API key from Chargebee. This is required for Payment Components, Functions, and Card Components.
isItemsModel
Boolean
This will enable support for product catalog 2.0.
businessEntityId
String
The unique ID of the business entity in Chargebee Billing. Applicable only if business entities are enabled for the site. If omitted, the default business entity configured for the site is used.
enableRedirectMode
Boolean
If this is enabled, end user will be redirected to chargebee checkout and self-serve portal page instead of opening in a modal box. This is needed, if amazon pay is configured as one of your supported payment methods. Please make sure you have configured redirect URL in checkout and self-serve portal, so that the user is able to navigate back to the app.
iframeOnly
Boolean
This will work only on mobile browsers. Set true to open the Checkout or Portal as an iFrame on the same browser tab.

When this is set to true,
  • If Checkout or Portal is opened from within an application, it opens in a WebView tab.
  • If Checkout or Portal is opened from a WebView tab, it opens on the same WebView tab.
  • If Checkout or Portal is opened from a browser tab, it opens on the same browser tab.
enableGATracking
Boolean
This will enable Google Analytics (analytics.js) tracking. Follow the steps to integrate Google Analytics with Chargebee checkout(In-app checkout).
enableGTMTracking
Boolean
This will enable Google Tag Manager. Learn more about on how to use Google Analytics via GTM in Chargebee.
enableFBQTracking
Boolean
This will enable Facebook pixel tracking. Follow the steps to integrate Facebook pixel tracking with Chargebee checkout (In-app checkout).
enableFriendbuyTracking
Boolean
If this is enabled, Chargebee will send customer information and order information to friendbuy and will also open friendbuy's post purchase widget based on your integration settings. Please make sure you allowlist your domain in the checkout settings page.
enableRefersionTracking
Boolean
This will enable Refersion tracking (Referral integration). Learn more about Chargebee-Refersion integration .

Note: This is available only in PC 1.0

# Return value

chargebee instance object

# Example

var cbInstance = Chargebee.init({
    site: "site-name", // your test site
    domain: "https://mybilling.acme.com" // this is an optional parameter.
})
1
2
3
4

# getPortalSections()

This function returns an object with all the available sections in Chargebee customer portal. This section name can be used to forward a user to a particular section or open the section as an individual card.

# Syntax

Chargebee.getPortalSections();
1

# Return value

An object with all the available sections in Chargebee customer portal.

# Example

{
  "SUBSCRIPTION_DETAILS": "sub_details",
  "SUBSCRIPTION_CANCELLATION": "sub_cancel",
  "EDIT_SUBSCRIPTION": "edit_subscription",
  "VIEW_SCHEDULED_CHANGES": "scheduled_changes",
  "ACCOUNT_DETAILS": "account_details",
  "EDIT_ACCOUNT_DETAILS": "portal_edit_account",
  "ADDRESS": "portal_address",
  "EDIT_BILLING_ADDRESS": "portal_edit_billing_address",
  "EDIT_SHIPPING_ADDRESS": "portal_edit_shipping_address",
  "EDIT_SUBSCRIPTION_CUSTOM_FIELDS": "portal_edit_subscription_cf",
  "PAYMENT_SOURCES": "portal_payment_methods",
  "ADD_PAYMENT_SOURCE": "portal_add_payment_method",
  "EDIT_PAYMENT_SOURCE": "portal_edit_payment_method",
  "VIEW_PAYMENT_SOURCE": "portal_view_payment_method",
  "CHOOSE_PAYMENT_METHOD_FOR_SUBSCRIPTION": "portal_choose_payment_method",
  "BILLING_HISTORY": "portal_billing_history"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# getInstance()

This function will return 'chargebee instance' object created using init() function.

# Syntax

Chargebee.getInstance();
1

# Return value

chargebee instance object. Error will be thrown if instance is not created.

# registerAgain()

Use this function to rebind listeners if a new element is inserted dynamically to the DOM. Used for drop-in script Checkout integration.

# Syntax

Chargebee.registerAgain();
1

# Return value

None.

# Example

const checkoutLink = document.createElement('a');
checkoutLink.href = "javascript:void(0)";
checkoutLink.dataset.cbType = "checkout";
checkoutLink.dataset.cbPlanId = "cbdemo_scale";
document.body.appendChild(checkoutLink);

Chargebee.registerAgain();
1
2
3
4
5
6
7

← Chargebee Object →