Tutorial : Drop-in Checkout

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

Setup

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

  • Signup/Signin to your Chargebee account
  • Create a new plan with a trial period in your Chargebee TEST site.
  • Configure a redirect URL in the newly created plan. Users will be redirected to this URL, after a successful checkout.

Implementation

Create an HTML page in your site for your customers to signup. Lets assume you are providing only one plan to your customers.

  1. Include the chargebee.js script mentioned below in 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. Create a link/button for your customers to subscribe to the plan. Clinking this link/button will open Chargebee's checkout page.
  • HTML

The link/button code above is available in your Chargebee site. This will help you create button/link for different plans and addons available in 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:

var cbInstance = Chargebee.getInstance();
var cart = cbInstance.getCart();
var customer = {first_name: "First Name", last_name: "", billing_address:{first_name: "", last_name: "", company: "", phone: "", line1: "", line2: ""}};
// Setting custom fields
customer["cf_custom_field1"] = "Custom field 1"
cart.setCustomer(customer);

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

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

Simulating drop in script functionality with your button

You can also use your own button instead of drop in code and open your checkout

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