# API Reference
Chargebee.js API can help you to handle more advanced use cases,
- Setting checkout and portal callbacks
- Modifying the plan quantity dynamically
- Adding / removing addons on demand
- Prefilling customer information and shipping information in the checkout
# Chargebee object
# getInstance
This function will return chargebee instance object that can help you with some advanced customizations.
# Syntax
Chargebee.getInstance();
# Return value
chargebee instance object
# registerAgain
This function is used to rebind all the events attached. Use this function if a new element inserted dynamically after page load.
# Syntax
Chargebee.registerAgain();
# Chargebee instance object
Chargebee instance object is used to set callbacks for checkout and self-serve portal, and to fetch cart and product data related to checkout.To ensure that you get all the callbacks which you set, do whitelist your domain in Chargebee. You can allowlist your domain here, Settings > Configure Chargebee >Checkout & Self-Serve Portal Settings > Configuration > Advanced Settings > Add domains
# setCheckoutCallbacks
You can use this function to set callbacks with respect to checkout.
# Syntax
cbInstance.setCheckoutCallbacks(setterFunction);
# Parameters
# Example
cbInstance.setCheckoutCallbacks(function(cart) {
// you can define a custom callbacks based on cart object
return {
loaded: function() {
console.log("checkout opened");
},
close: function() {
console.log("checkout closed");
},
success: function(hostedPageId) {
console.log("Checkout success. ID:", data.id);
},
step: function(value) {
// value -> which step in checkout
console.log("Checkout step:", value);
},
resize: function(value) {
console.log("Checkout page height:", value);
}
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# setPortalCallbacks
You can use this function to set callbacks with respect to Self-serve portal.
# Syntax
Chargebee.setPortalCallbacks(callbacks);
# Parameters
# Example
cbInstance.setPortalCallbacks({
close: function() {
console.log("closed");
},
visit: function(value) {
// value -> which page in checkout/portal
console.log(value);
}
});
2
3
4
5
6
7
8
9
# getCart
This function retrieves the Cart object.
# Syntax
var cart = cbInstance.getCart();
# Return value
Cart object
# initializeProduct
This function initializes the Product object.
# Syntax
var product = cbInstance.initializeProduct(planId, planQuantity);
# Parameters
# Return value
Product object
# Examples
var product = cbInstance.initializeProduct('test-plan');
# getProduct
This function retrieves the Product object associated with a checkout button.
# Syntax
var product = cbInstance.getProduct(checkoutButtonElement);
# Return value
Product object
# Examples
var checkoutButtonElement = document.querySelectorAll("[data-cb-type=checkout]")[0];
var product = cbInstance.getProduct(checkoutButtonElement);
2
# Cart object
Cart object is meant to provide advanced control while using Drop-in script to dynamically change customer details and also dynamic change product information with the help of Product object. It contains customer related information such as shipping, billing information and product information.
# setCustomer
Use this function to set customer related information. This information is passed and pre-filled in checkout automatically. Customer level custom fields can also be passed.
# Syntax
cart.setCustomer(customer);
# Parameters
# *Example
const cbInstance = Chargebee.getInstance();
const cart = cbInstance.getCart();
const customer = {
first_name: "John",
last_name: "Smith",
locale: "it",
billing_address: {
first_name: "John",
last_name: " Smith",
line1: "132, My Street",
line2: "Kingston, New York",
state_code: "NY",
country: "US",
zip: "12401"
}
};
// Setting custom fields
customer["cf_about_myself"] = "This is short description"
cart.setCustomer(customer);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# setShippingAddress
Use this function to set shipping information. This information is passed and pre-filled in checkout automatically.
# Syntax
cart.setShippingAddress(shippingAddress);
# Parameters
# Examples
var cart = cbInstance.getCart();
var shippingAddress = {first_name: "", last_name: "", company: "", phone: "", line1: "", line2: ""};
cart.setShippingAddress(shippingAddress);
2
3
# Product object
Product object is used to dynamically change plan quantity, addons, and coupons.
# addAddon
# Syntax
product.addAddon(addon);
# Parameters
# Example
product.addAddon({id: "addon_1", quantity: 2});
product.addAddon("addon_1");
2
# Syntax
product.removeAddon(addon);
# Parameters
# Example
product.removeAddon({id: "addon_1", quantity: 2});
product.removeAddon("addon_1");
2
# setPlanQuantity
Use this to set a plan quantity.
# Syntax
product.setPlanQuantity(planQuantity);
# setAddons
Use this to dynamically set a list of addons.
# Syntax
product.setAddons(addons);
# Parameters
# incrementPlanQuantity
Use this to increment plan quantity by 1.
# Syntax
product.incrementPlanQuantity();
# decrementPlanQuantity
Use this to decrement plan quantity by 1.
# Syntax
product.decrementPlanQuantity();
# incrementAddonQty
# Syntax
product.incrementAddonQty(addonId);
# Parameters
# decrementAddonQty
# Syntax
product.decrementAddonQty(addonId);
# Parameters
# addCoupon
# Syntax
product.addCoupon(coupon);
# Parameters
# setCustomData
You can set subscription level custom fields with this method. This information is passed and pre-filled in checkout automatically.
# Syntax
product.setCustomData(subscriptionData);
# Example
product.setCustomData({cf_data1: "test", cf_data2: "test2"});
# addCharge
# Syntax
product.addCharge(chargeId);
# removeCharge
# Syntax
product.removeCharge(chargeId);
# incrementChargeQty
Use this to increment charge quantity by 1.
# Syntax
product.incrementChargeQty(chargeId);
# decrementChargeQty
Use this to decrement charge quantity by 1.
# Syntax
product.decrementChargeQty(chargeId);
