Frontend Capabilities

# How to Integrate

API-based integration can be used to integrate the below:

  • Checkout
  • Portal

# Setting up Chargebee JS

Inserting chargebee.js script in your application

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

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

​​Initializing a Chargebee instance

Inside your JavaScript code, initialize Chargebee and get 'chargebee instance' object. This object is used further to create components.

Example:

var cbInstance = Chargebee.init({
  site: "site-name", // your test site
  domain: "https://mybilling.acme.com" // this is an optional parameter.
  // Use this, if custom domain is enabled for your site
})
1
2
3
4
5
6

Learn more.

# How to Integrate Checkout

To integrate Checkout via API, follow these steps:

  1. Open Checkout.
  2. Create a Chargebee-hosted page to accept payment details from a customer.

# Opening Chargebee Checkout

In your javascript code, use the chargebee instance to open checkout.

Learn more on openCheckout.

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

Sample code

  • jQuery
  • vue

# Create a Chargebee-hosted page using API

Follow the steps below to create a Chargebee hosted page object:

  1. Create an HTTP endpoint at your server.
  2. Generate the hosted page object using either of the below APIs based on your use case.
Please make sure the HTTP response has the content type "application/json".

Sample code

  • ruby
  • java
  • python
  • php
  • .net

Sample response

{
  "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

# How to Integrate Portal

To integrate Portal via API, follow these steps:

  1. Set a portal session.
  2. Create and open the Self-Serve Portal.
  3. Create a portal session for your customer.

# Set portal session

Create a function that will return a promise and pass it to setPortalSession method of Chargebee instance. This promise should resolve a portal session object.

  • jQuery
  • vue

# Create and open the Self-Serve Portal

Create and open the self-serve portal using the portal object.

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

Learn more to know more about supported functions.

Logging out

After your end customers access our self-serve portal, we will maintain the session for one hour. If you want to end this session, use logout method of Chargebee instance.

# Create a portal session using API

Follow the steps below to create a portal session for your customer:

  1. Create an HTTP endpoint at your server.
  2. Create the portal session using the portal session API. (opens new window)

Sample code

  • ruby
  • java
  • python
  • php
  • .net

The portal session response JSON should look like this:

{
  "id": "portal_XpbGElGQgEHspHB",
  "token": "cuqdrWacuITd2cabvf97KJD73SpNcd7BICB",
  "access_url": "https://yourapp.chargebeeportal.com/portal/access/cuqdrWacuITd2cabvf97KJD73SpNcd7BICB",
  "status": "created",
  "created_at": 1515494835,
  "expires_at": 1515498435,
  "object": "portal_session",
  "customer_id": "XpbGEt7QgEHsnL7O"
}
1
2
3
4
5
6
7
8
9
10
Please make sure the HTTP response has the content type "application/json".

Managing customer payment sources

← Tutorial: Checkout New Subscription →