Checkout & Self-Serve portal

# Checkout via API

# When to use API

Integrating using API provides you better control over the features and functionalities. But requires extensive programming knowledge to work with.

API integration is recommeneded if you,

  • Have a user authentication (/management) system at your end.
  • Or need more control than what is offered through drop-in script. For example, overriding price and changing trial end.

# Call Flow

You need to have an HTTPS end point at your end which uses Chargebee Hosted Page API and returns a Hosted Page object.

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 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 →