Frontend Capabilities

# 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 (opens new window) account with an active sandbox (test) site (opens new window).

# 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>
1

Security requirement

You must load the chargebee.js script directly from Chargebee's servers for PCI compliance. Do not download and host the script on your own server.

# 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:

  • JavaScript
  • Vue.js
  • JQuery

# 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 (opens new window) in Chargebee, you must include the domain parameter in the initialization. This ensures that Chargebee-hosted pages are served from your custom domain.

  • JavaScript
  • Vue.js
  • JQuery

# Initialize with publishable key

For Payment Components, Functions, and Card Components, you must include a publishable API key (opens new window) in the initialization.

  • JavaScript
  • Vue.js
  • JQuery

# Initialize with multiple options

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

  • JavaScript
  • Vue.js
  • JQuery

Reinitializing Chargebee.js

If you need to call init() again within the same session, you must first call tearDown() to clean up the existing Chargebee instance and remove any components from the DOM.

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

// Now safe to initialize again
const chargebee = Chargebee.init({
  site: "YOUR-CHARGEBEE-BILLING-SUBDOMAIN"
});
1
2
3
4
5
6
7

# Next steps

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

← Chargebee Library →