Drop-in Checkout with Chargebee.js

The drop-in script is the quickest way to open Chargebee Checkout. You add one script tag and mark up a link with data-cb-* attributes — no JavaScript required for the basic flow.

Honey Comics is a fictitious online comic book store that sends comic books to its subscribers every week. Customers sign up by providing their payment details. Try the demo, then follow the steps below to build something similar.

Prerequisites

Sign up for a Chargebee account.
Create a plan with a trial period on your Chargebee test site.
Configure a redirect URL on that plan. Customers land there after a successful checkout.

Include the Chargebee.js script

Add the script to your signup page and set data-cb-site to your site name.

<script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="honeycomics-v3-test"></script>
<!-- replace honeycomics-v3-test with your site name -->

Create a link or button for customers to subscribe. Clicking it opens Chargebee Checkout.

<a href="javascript:void(0)"
    data-cb-type="checkout"
    data-cb-plan-id="basic"
    data-cb-plan-quantity="3"
    data-cb-addons_id_0="addon_1"
    data-cb-addons_quantity_0="2">Subscribe</a>

Chargebee generates this markup for you. In Chargebee Billing, go to the drop-in script section to build links for the plans and addons on your site.

On page load, the Chargebee.js script finds every drop-in link on the page and binds a click event to open Checkout. If you use Angular, React, or Vue, register the click events yourself by calling Chargebee.registerAgain() after the component mounts.

Prefill customer and billing details

To prefill customer information, a billing address, or pass hidden information to Chargebee, set it on the cart.

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

For the supported parameters, see setCustomer.

To prefill a shipping address:

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

For the supported parameters, see setShippingAddress.

Change the cart at runtime

You can also modify plan quantity, addons, and coupons dynamically.

var cbInstance = Chargebee.getInstance();
var link = document.querySelectorAll("[data-cb-type=checkout]")[0];
var product = cbInstance.getProduct(link);
// pass an addon id, or an object with id and quantity
product.addAddon({ id: "addon_1", quantity: 2 });
product.incrementPlanQuantity();
product.decrementPlanQuantity();
product.removeAddon("addon_1");
product.incrementAddonQty("addon_1");
product.decrementAddonQty("addon_1");
product.addCoupon("coupon_id");
// adding subscription level custom fields
product.data["cf_subtest"] = "subscription custom field";

For everything the product object supports, see the product reference.

Open Checkout from your own button

If you would rather use your own button than a drop-in link, build the cart yourself and call proceedToCheckout().

document.addEventListener("DOMContentLoaded", function() {
  let cbInstance = Chargebee.getInstance();
  let cart = cbInstance.getCart();
  let product = cbInstance.initializeProduct("cbdemo_grow");
  cart.replaceProduct(product);
  document.getElementById("subscribe").addEventListener("click", function(){
    cart.proceedToCheckout();
  });
});

Reference

For the full cart and product APIs, see the cart reference and the product reference in the Chargebee.js Reference.

Prerequisites

Include the Chargebee.js script

Add the subscribe link

Prefill customer and billing details

Change the cart at runtime

Open Checkout from your own button

Reference

In this Page

Related reading