# 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.
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.
# 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,
# 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.
# 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.