Frontend Capabilities

# Tutorial: Drop-in Checkout

Honey Comics, a demo application, is a fictitious online comic book store providing subscription services for comics. They send comic books weekly to their subscribers. Users can sign up for a subscription by providing their payment details. Click here (opens new window) for a demo. The steps below will help you build an app similar to the demo.

# Setup

To Checkout a new subscription via drop-in-code, you need to:

# Implementation

Create an HTML page on your site for your customers to signup. Let us assume you are providing only one plan to your customers.

  1. Include the chargebee.js script mentioned below on your signup page.
  <script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="honeycomics-v3-test"></script>
  <!-- replace honeycomics-v3-test with your site name -->
1
2
  1. Create a link/button for your customers to subscribe to the plan. Clicking this link/button will open Chargebee's checkout page.
  • HTML

TIP

The link/button code above is available on your Chargebee site (opens new window). This will help you create the link/button for different plans and add-ons available on your Chargebee site.

By default, chargebee.js script will look for all the buttons present on page load and binds click events for opening checkout. However, if you are using Angular, React or Vue Frameworks, you must manually register click events to the buttons by calling Chargebee.registerAgain() after the HTML component is mounted/created.

# Advanced Configurations

If you want to pre-fill customer information, billing address or you want to pass some hidden information to Chargebee, you can pass it like:

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Learn more about setCustomer supported parameters.

If you want to pre-fill shipping address information, you can pass it like:




 

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

Learn more about setShippingAddress supported parameters.

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



 
 
 
 
 
 
 
 

 

var link = document.querySelectorAll("[data-cb-type=checkout]")[0];
var product = cbInstance.getProduct(link);
product.addAddon(addon: Addon | string); // you can either pass an object with id and quantity
product.incrementPlanQuantity();
product.decrementPlanQuantity();
product.removeAddon(addon: Addon | string);
product.addAddon(addon: Addon | string);
product.incrementAddonQty(addonId);
product.decrementAddonQty(addonId);
product.addCoupon(coupon_id);
// adding subscription level custom fields
product.data["cf_subtest"] = "subscription custom field";
1
2
3
4
5
6
7
8
9
10
11
12

Learn more about product objects.

# Simulating drop-in script functionality with your button

You can also use your button instead of a drop-in code and open checkout.

Sample code:

  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();
    });
  });
1
2
3
4
5
6
7
8
9

← API Reference →