# Checkout via API

# When to use API

Integrating using API provides you with better control. But requires coding knowledge. Choose this option if you

• Have user authentication (/management) system at your end.
• Or need more control than offered by drop-in code (like 'price overriding' , changing 'trial end date')

# Call Flow

You need to have an HTTPS end point at your end, that will use chargebee hosted page api and return a hosted page object as a response.

Then use chargebee.js to open the checkout

# Integration Steps

# Including chargebee.js script to your application

Include the below script in your HTML page. You only need to do this once, per page.

<script src="https://js.chargebee.com/v2/chargebee.js"></script>

# Intializing a Chargebee instance

Inside your javascript code, initialize chargebee instance once the page is loaded. This instance is used further to open checkout.

• jQuery
• vue

# Opening Chargebee Checkout

In your javascript code, Use the chargebee instance that was created before in the following way.

• jQuery
• vue

Please check the API reference to know more about supported callback functions.

# End point that returns a hosted page object

Create an HTTP endpoint at your server. The response of this end point should be a hosted page object. You can have your own implemention on how you want to generate the hosted page object. You can either use checkout new or [checkout existing] (https://apidocs.chargebee.com/docs/api/hosted_pages#checkout_existing_subscription) API based on your use case.

• ruby
• java
• python
• php
• .net

# The hosted page response JSON should look like this:

{
  "id": "8ajOxcuyG692GDy9yjnZ2hNM1ATugOFQl",
  "type": "checkout_new",
  "url": "https://yourapp.chargebee.com/pages/v3/8ajOxcuyG692GDy9yjnZ2hNM1ATugOFQl/",
  "state": "created",
  "embed": true,
  "created_at": 1515494821,
  "expires_at": 1515498421
}