# 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