Checkout & Self-Serve portal

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

Server side changes

Then use chargebee.js to open the checkout Client side changes

# 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>
1

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

In mobile browsers, we open the checkout in a new window. So, please make sure you open the checkout as a result of an user action or else the browser will block the new window creation.

# 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 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
}
1
2
3
4
5
6
7
8
9
Please make sure the HTTP response has the content type "application/json"

← Portal via API →