How to Integrate

Setting up Chargebee JS

Inserting chargebee.js script in your application

Include the following script in your HTML page. You need to do this only once per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script> 

​​Initializing a Chargebee instance

Inside your JavaScript code, initialize Chargebee with the publishable key (opens new window) once the page is loaded and get 'chargebee instance' object. This object is used further to create components.

Example:

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

Learn more.

Integrating Components

Following are the modes of integration for card components supported by Chargebee.js:

• Default mode
• Fields mode

Learn more about components and fields.

Using card component in the Default mode

Adding HTML

Create a container element in your HTML to mount the Component. For Angular, Vue and React, use the respective Components provided by us.

• jQuery
• vue
• angular
• react

Adding JavaScript

You need to write JavaScript code to mount Chargebee Components and for tokenization(getting Chargebee's temp token (opens new window))

• Mounting
  For Angular, React and Vue, Chargebee JS wrappers would automatically mount the Components. For other types of integrations, you need to manually mount them.

• Tokenizing

• jQuery
• vue
• angular
• react

Using card component in the Fields mode

Adding HTML

Create container elements in your HTML to mount Chargebee components. For Angular, Vue and React, the corresponding wrappers (opens new window) will create the container elements for you.

• jQuery
• vue
• angular
• react

Adding JavaScript

You need to write JavaScript code to mount all fields and for tokenization(getting Chargebee's temp token)

• Mounting
  For Angular, React and Vue, Chargebee js wrappers (opens new window) would automatically mount the component. For other types of integrations, you need to manually mount the component.

• Tokenizing

• jQuery
• vue
• angular
• react

Processing Payments

Payments can be processed using card components and fields in two ways:

• Tokenization
• 3D Secure

Learn more about tokenization and 3D Secure workflows.

Tokenization

To perform tokenization, enter card details and initiate tokenization using tokenize. Create a subscription (opens new window) using the Chargebee token returned by tokenize.

Using 3D Secure

To Perform 3D-Secure authorization, create a paymentIntent on the server-side and then pass the created paymentIntent to authorizeWith3ds function. Components & Fields internally uses the tokenize function to perform tokenization and then 3DS Helper Module to perform 3DS authorization.

The authorized paymentIntent can then be used to create a subscription (opens new window), create a payment source (opens new window), etc.

...
    $("#payment").on("submit", function(event) {
      event.preventDefault();
      ...
      // Perform 3D Secure authorization
      cardComponent.authorizeWith3ds(paymentIntent, additionalData, callbacks).then(paymentIntent => {
        // Send ajax call to create a subscription or to create a card payment source using the paymentIntent ID
      }).catch(error => {
        console.log(error);
      });
    });
...