Docs

Support

Getting Started

Implementing Chargebee

Product Catalog

Subscriptions

Customers

Invoices, Credit Notes and Quotes

Taxes

Payments

Hosted Capabilities

Site Configuration

Reports and Analytics

Integrations

Data Privacy & Security

Data Operations

Integration Options

Chargebee offers the following options to integrate the hosted checkout depending on your application/website's framework and business model.

Hosted Pages API: recommended if you want to authenticate the user at your end, override payment-related information, handle returning users, and collect additional information.
Drop-in Script.
Plan Specific URL.

When to use API vs. Drop-in Script

Hosted Pages API

Using Hosted Pages API to create In-app Checkout is the recommended approach when you already maintain a user-management or authentication system. It gives you control to override predefined information for a particular instance like changing the price of an item or providing additional trial period.

Benefits of using API integration

Allows you to manage authentication, collect additional information in your application/website.
Allows you to override plan and add-on pricing during checkout.
Optimize trial tenure. This allows you to customize the trial tenure based on the customer (For example, you can offer a 14-day trial to one customer, and a one month trial to another).

Here's a quick example on when you may want to choose Checkout via API over Drop-in script:

Let us assume that James runs a digital weight loss and fitness app. He wants to collect user information such as the client's height, weight, food habits, and so on along with their address, email, and store it in his database instead of Chargebee. He would still like to use Chargebee's Checkout as he does not want to get involved in the nitty-gritty details of PCI Compliance.

James can choose the API integration as this would allow him to collect additional information at his frontend and then use Chargebee's Hosted Pages API to collect the remaining information (specifically payment details for example).

To understand more about the integration and implementation of Checkout via API, read our developer documentation .

You can use hosted checkout via APIs for the below workflows:

Drop-in Script

Drop-in Script is a plug-in type easy to use solution that requires minimal developer help. You can easily create a checkout page by adding a script generated for the plan-item on your HTML page.

Checkout integrated using Drop-in script is Level 1 PCI compliant. Hence you need to fill in this questionnaire before integrating.

Note:

Per compliance team, the merchant should review the following documents from the above link:

1) SAQ Instructions and Guidelines
2) Understanding SAQs for PCI DSS

The SAQs have to be filled out based on the applicability as per the guideline document and shared with the payment gateway. No document needs to be submitted to Chargebee.

To use the Drop-in Script to integrate Checkout, follow these steps:

Click Settings > Configure Chargebee > Checkout and Self serve portal > Integrate with Chargebee

Select the Plan and Add on from the drop down.

Copy the Header script and paste it within the <head> tag of the HTML page.

Copy the Checkout Button code and paste it in the body of the HTML page.

Here is a sample checkout.

You can use hosted checkout via Drop-in for the below workflows:

Checkout for new subscriptions
Checkout for one-time purchases

Learn more on how to integrate Checkout using Drop-in script.

Plan Specific URL

You can manually create a checkout URL and embed it in your application/website's Checkout button. On click of the checkout button, Checkout is displayed.

This approach is the easiest. Through this integration, the checkout window opens in a new tab. Products in the Checkout URL cannot be altered during checkout since the integration does not support dynamic modification. Complex business logic such as price override, user authentication and so on, are not possible through this integration.

Note

In this integration approach, if user clicks the checkout link when on a WebView tab the checkout window would not work. This is because the integration only supports opening the checkout window in a new tab.

Example for a plan specific URL:

https://{your-site}/hosted_pages/plans/no-trial
?coupon_ids[0]=fifty
&addons[id][0]=day-pass
&addons[quantity][0]=2
&customer[email]=vivek@chargebee.com
&customer[cf_test]=customer%20custom%20field
&customer[cf_date]=1991-09-16
&subscription[cf_sub_test]=subscription%20custom%20field

Here's the syntax to create a plan specific URL:

https://&lt;site-name&gt;.chargebee.com/hosted_pages/plans/&lt;plan-id&gt;

Replace the "site-name" and "plan-id" placeholders with your Chargebee site name and Plan ID. For example if the site name is docstest-test and plan ID is sapphire then this is how the URL would look:

https://docstest-test.chargebee.com/hosted_pages/plans/sapphire

This approach is recommended if your application/website's code does not accept JS scripts.

List of Supported Query Parameters

Section	URL Parameter
Plan	/hosted_pages/plans/<plan_id> subscription[plan_quantity]
Addon	addons[id][0] addons[quantity][0]
Coupons	coupon_ids[0]
Customer	All parameters available for Checkout a new subscription. exceptions: taxability, consolidated_invoicing
Subscription	subscription[plan_quantity] subscription[start_date] subscription[<custom_field_name>]
Billing address	All parameters available here. exceptions: validation_status
Shipping Address	All parameters available here. exceptions: validation_status

You can integrate hosted checkout via plan-specific URL for the below workflows:

Checkout for new subscriptions
Checkout for one-time purchases

Was this article helpful?