Tutorial - Checkout new subscription

Please check the flow diagram, if you need to open checkout via hosted pages API

Honey Comics - Demo Application

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 API, you need to:

  • Signup/Signin to your Chargebee account
  • Create a new plan with a trial period in your Chargebee TEST site.
  • Grab the Chargebee API key of your Chargebee TEST site.

Setup the client library

Download and import the client library of your choice. and configure the client library with your Chargebee TEST site name and API key.

  • ruby
  • nodejs
  • java
  • python
  • php

Build the signup page

In the demo we are using a two-step checkout process. Customer's account information is collected in the first step and when he clicks on subscribe, Chargebee's checkout page will open.

A sample input element is shown below,

  • jquery
  • vue
  • angular
  • react

Endpoint that returns a hosted page object

In the server side, Chargebee's checkout new subscription API is used to create a hosted page object for the new subscription, by passing the information collected from the client side.

  • ruby
  • nodejs
  • java
  • python
  • php

Bind checkout opening with the click event

In the client side, a function that returns a 'Promise' object must be created. This promise object can be a result of an ajax call, which is done to the end point which we created in the previous step, and this must resolve to an hosted page object.

  • jquery
  • vue
  • angular
  • react