# Tutorial: Checkout New Subscription
If you need to open checkout via hosted pages API, please assess the flow diagram.
# Honey Comics - Demo Application
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 API, you need to:
- Signup/Sign-in to your Chargebee account (opens new window)
- Create a new plan with a trial period on your Chargebee TEST site.
- Grab the Chargebee API (opens new window) key of your Chargebee TEST site.
# Setup the client library
Download and import (opens new window) 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 this demo, we are using a two-step checkout process. The 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
On the server side, Chargebee's checkout new subscription API (opens new window) 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 like openCheckout 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
