Drop-in code - JS Reference

Overview

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
This reference is for Drop-in script based integration. If you are integrating using API use this reference instead.

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 whitelist 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

setterFunction
Function
Arguments - Hide
cart
Cart Object
Return type
callbacks
Object View properties

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) {

    },
    step: function(value) {
      // value -> which step in checkout
      console.log(value);
    }
  }
});

setPortalCallbacks

You can use this function to set callbacks with respect to self-serve portal.

Syntax

Chargebee.setPortalCallbacks(callbacks);

Parameters

callbacks
Object Hide properties
loaded
Function
This function will be called once the portal is loaded
close
Function
This function will be called once the portal is closed by the end user
visit
Function
This function will be called everytime an user visits a section in the customer portal
Arguments - View
paymentSourceAdd
Function
This function will be called whenever a new payment source is added in portal
paymentSourceUpdate
Function
This function will be called whenever a payment source is updated in portal
paymentSourceRemove
Function
This function will be called whenever a payment source is removed in portal
subscriptionChanged
Function
This function will be called whenever a subscription is changed
Arguments - View
subscriptionCustomFieldsChanged
Function
This function will be called whenever a subscription custom fields are changed
Arguments - View
subscriptionCancelled
Function
This function will be called when a subscription is cancelled
Arguments - View
subscriptionResumed
Function
This function will be called when a subscription is resumed
Arguments - View
subscriptionPaused
Function
This function will be called when a subscription is paused
Arguments - View
scheduledPauseRemoved
Function
This function will be called when a subscription that is scheduled for pause is removed
Arguments - View
subscriptionReactivated
Function
This function will be called when a cancelled subscription is reactivated
Arguments - View

Example

cbInstance.setPortalCallbacks({
  close: function() {
    console.log("closed");
  },
  visit: function(value) {
    // value -> which page in checkout/portal
    console.log(value);
  }
});

getCart

This function will return the cart object.

Syntax

var cart = cbInstance.getCart();

Return value

cart object

initializeProduct

This function will initialize a product object.

Syntax

var product = cbInstance.initializeProduct(planId, planQuantity);

Parameters

planId
String Required
planQuantity
String

Return value

product object

Examples

var product = cbInstance.initializeProduct('test-plan');

getProduct

This function will return the product object associated with each 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);

Cart object

Cart object can contain customer related information, shipping information and product information.

setCustomer

Use this function to set customer related information. This information will be passed to checkout and will be prefilled. Customer level custom fields can also be passed

Syntax

cart.setCustomer(customer);

Parameters

customer
Object Hide properties
first_name
String
last_name
String
company
String
phone
String
email
String
billing_address
Object View properties

*Examples

var cart = cbInstance.getCart();
var customer = {first_name: "First Name", last_name: "", billing_address:{first_name: "", last_name: "", company: "", phone: "", line1: "", line2: ""}};
cart.setCustomer(customer);

setShippingAddress

Use this function to set shipping information. This information will be passed to checkout and will be prefilled.

Syntax

cart.setShippingAddress(shippingAddress);

Parameters

shippingAddress
Object Hide properties
first_name
String
last_name
String
company
String
phone
String
email
String
line1
String
line2
String
city
String
state
String
state_code
String
country
String

Examples

var cart = cbInstance.getCart();
var shippingAddress = {first_name: "", last_name: "", company: "", phone: "", line1: "", line2: ""};
cart.setShippingAddress(shippingAddress);

Product object

Product object can be used to add/remove addons and coupons dynamically.

addAddon

Syntax

product.addAddon(addon);

Parameters

addon
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity
String
Addon id

Example

product.addAddon({id: "addon_1", quantity: 2});
product.addAddon("addon_1");

Syntax

product.removeAddon(addon);

Parameters

addon
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity
String
Addon id

Example

product.removeAddon({id: "addon_1", quantity: 2});
product.removeAddon("addon_1");

setPlanQuantity

Use this to set a plan quantity

Syntax

product.setPlanQuantity(planQuantity);

setAddons

Use this to set a list of addons dynamically

Syntax

product.setAddons(addons);

Parameters

addons
Array<Object>
Object Hide properties
id
String Required
Addon id
quantity
Number
Addon quantity

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

addonId
String
addon id

decrementAddonQty

Syntax

product.decrementAddonQty(addonId);

Parameters

addonId
String
addon id

addCoupon

Syntax

product.addCoupon(coupon);

Parameters

coupon
String
coupon id

setCustomData

You can set subscription level custom fields with this method. These subscription level custom fields will be passed on to checkout.

Syntax

product.setCustomData(subscriptionData);

Example

product.setCustomData({cf_data1: "test", cf_data2: "test2"});