Set up Chargebee.js

Overview

Chargebee.js is a JavaScript library that enables you to integrate Chargebee's features such as checkout, payment processing, subscription management, and customer portal features into your web application. This guide shows you how to include and initialize the library in your project.

Prerequisite

Before you begin, ensure you have a Chargebee Billing account with an active sandbox (test) site.

Step 1: Include the Chargebee.js script

To use Chargebee.js, you must include the script in your HTML page. You only need to do this once per page.

Add the script tag

Add the following script tag to your HTML page, typically in the <head> section.

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

Step 2: Initialize Chargebee.js

After including the script, initialize Chargebee.js in your JavaScript code. The initialization creates a Chargebee instance object that you can use to access Chargebee.js features.

Initialize when the page loads

Initialize Chargebee.js after the page has loaded to ensure the DOM is ready. Here are examples for different frameworks:

// Initialize when the DOM is loaded.
document.addEventListener('DOMContentLoaded', function() {
  let chargebee = Chargebee.init({
    site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN"
  });

  // Access the instance anywhere in your application.
  chargebee = Chargebee.getInstance();
});

Step 3: Advanced initialization options

The Chargebee.init() method accepts additional optional parameters that enable specific features or customize the behavior of Chargebee.js.

Initialize with custom domain

If you have configured a custom domain in Chargebee, you must include the domain parameter in the initialization. This ensures that Chargebee-hosted pages are served from your custom domain.

// Initialize with custom domain.
document.addEventListener('DOMContentLoaded', function() {
  let chargebee = Chargebee.init({
    site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
    domain: "https://billing.yourdomain.com" // Your custom domain
  });
});

Initialize with publishable key

For Payment Components, Functions, and Card Components, you must include a publishable API key in the initialization.

// Initialize with publishable key.
document.addEventListener('DOMContentLoaded', function() {
  let chargebee = Chargebee.init({
    site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
    publishableKey: "test_..." // Your publishable API key
  });
});

Initialize with multiple options

You can combine multiple initialization options to suit your integration requirements.

// Initialize with multiple options.
document.addEventListener('DOMContentLoaded', function() {
  let chargebee = Chargebee.init({
    site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN",
    domain: "https://billing.yourdomain.com", // Optional: custom domain
    publishableKey: "test_..." // Optional: required for Payment Components, Functions, and Card Components
  });
});

// Clean up before reinitializing
Chargebee.tearDown();

// Now safe to initialize again
const chargebee = Chargebee.init({
  site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN"
});

Next steps

After setting up Chargebee.js, you can access the following features directly through the chargebee object.