Getting Started

Product Catalog

Customers

Subscriptions

Invoices, Credit Notes, and Quotes

Taxes

Payments

Site Configuration

Data Privacy & Security

Data Operations

Reports and Analytics

Integrations

In-App Checkout 

In-app Checkout is an intuitive pop-up type checkout. Customers can use it to enter their account and payment details when they checkout a product/service from your application/website. You can also customize In-app Checkout to display your brand elements, fields, charges, taxes, add a thank you message, and experiment play around with multiple workflows to suit your business needs.

Here is a sample of how the In-app Checkout looks and works:

Prerequisites 

Before you configure In-app Checkout, make sure to do the following in your Chargebee site:

  • Create Product Families. To create a Product Family, click Product Catalog > Product Families > Create Product Family. Learn more about Product Families.

  • Create Plans. To create a Plan, click Product Catalog > Plans > Create PlanLearn more about Plans.

  • Configure a payment gateway of your choice to process payments. You can connect Chargebee with gateways like Stripe, Authorize.net, Braintree, and so on. To configure a payment gateway, click Settings > Configure Chargebee > Payment Gateways > Add GatewayLearn more about configuring payment gateways.

  • Configure your brand elements such as logo and brand color. These elements appear on In-app checkout, Emails and Invoices. To configure brand elements, click Settings > Configure Chargebee > Brand StylesLearn more about branding.

Options to set up In-app Checkout 

Depending on your application/website's framework and business model, you can choose how to integrate In-app Checkout. Chargebee provides you with three options to choose from,

  • Embedding the Drop-in Script.

  • Embedding an Item specific URL.

  • Use Chargebee's Hosted Pages API (recommended if you want to authenticate the user at your end, override payment-related information, handle returning users, collect additional information, etc.)

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.

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

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

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

2) Select the Product family, Plan, Currency, and Frequency from the drop-down list.

3) Add Addons and Charges if applicable using Add addon and Add charge options.


4) Copy the Header script and paste it within the head element of your website's HTML.


5) Copy the generated Checkout Button Code and hyperlink it in the subscribe button in your website's HTML. This way, when a customer clicks the subscribe button, the In-app Checkout opens and displays the above selected parameters of plan name, frequency, addon, and so on.

Item specific URL 

This feature allows you to construct a customized URL bound with the necessary plan, addons, charges and coupons. The resulting URL can then be embedded into the Checkout button on your application/website. This is useful if you are using a website that does not allow you to add JS scripts. Read this FAQ to know more about this feature.

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 over overriding item price and changing the trial end date. This requires significant developer efforts from your end.

Handling payment details via API requires you to be PCI compliant. For Chargebee to take care of the PCI Compliance, you need to fill in this questionnaire.

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 In-app 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.

3DS Payments via In-app Checkout 

Chargebee's In-app Checkout supports 3DS payments. Complete the actions specified in our SCA checklist and Chargebee will seamlessly start handling 3DS payments via In-app Checkout.

For scenarios that do not involve immediate payment such as subscriptions with trial, first-time charge waived off using coupon, and zero-dollar plan (only if collecting payment information), Chargebee performs minimum amount 3DS authorization. The authorized amount is automatically voided. This ensures that subsequent payments mostly go through without customer intervention.

For scenarios that involve immediate payment such as subscription without trial, subscription upgrade and so on, Chargebee takes care of initiating the 3DS flow and enabling 3DS verification to happen.

FAQs 

1. How to create an Item Specific URL?

When you create and use an item specific URL for checkout, the user interface of the In-app Checkout is retained but is displayed as a pop-up window in a new tab. 

Here's is an example of item specific URL for a plan:

https://{sitename}.chargebee.com/hosted_pages/checkout?subscription_items[item_price_id][0]={plan-id}

Now, to customize it for your usage, the placeholders need to be replaced with your Chargebee site name and Plan ID or Plan Price Point ID.

Example:

For a site named mars-voyage.chargebee.com having Plan Price Point ID as "mars-trip-usd-monthly" we can construct the item specific URL as below:

https://mars-voyage.chargebee.com/hosted_pages/checkout?subscription_items[item_price_id][0]=mars-trip-usd-monthly

Further, you can add addons, charges, coupons and many more to the query string (part in the URL after the question mark) to create a plan with all the necessary addons and charges attached. When a user clicks on the link, it takes them to the checkout window with all the fields pre-filled. All they have to do is enter their payment method details and checkout.

Example:

Here's how a plan when attached with addon and charge looks like in the item URL:

https://mars-voyage.chargebee.com/hosted_pages/checkout?
subscription_items[item_price_id][0]=plan-mars-bunker-rent-usd-monthly&
subscription_items[item_price_id][1]=addon-oxygen-supply-usd-daily&
subscription_items[item_price_id][2]=charge-spacesuit-with-pockets&
subscription_items[quantity][2]=5&
coupon_ids[0]=instigator-settlement

Breaking down the example, we get:

  • A monthly USD plan which is a recurring rent for the mars bunker.
  • A daily USD addon which is a recurring charge for consistent oxygen supply.
  • A one-time USD charge for spacesuits with pockets.
  • The quantity of five spacesuits with pockets. Note that it is associated with the spacesuit charge through indexing.
  • And finally, a coupon for being brave enough to be the first group of mars settlers.

 
List of allowed Query Parameters

Here's a list of query parameters you can use in the query string:

Module

Query Parameter

Subscription Item

subscription_items[item_price_id]

subscription_items[quantity]

Coupons

coupon_ids


Customer

All parameters available here can be used. 

exceptions: taxability, consolidated_invoicing

Subscription

subscription[start_date] 

subscription[<custom_field_name>]

Billing address

All parameters available here can be used.

exceptions: validation_status

Shipping Address

All parameters available here can be used.

exceptions: validation_status

Was this article helpful?
Loading…