Getting Started

Building Blocks

Subscription Features

Custom Fields

Localization

Invoices

Credits

Order Management

Billing Features

Taxes

Payment Methods

Direct Debit Payments

Configuring Gateways

Revenue Recovery

Checkout

Self-Serve Portal

Notifications

Reports and Analytics

Data Privacy & Security

Fraud Management

Migration

Other Features

Developers

Third Party Integrations

In-App Checkout 

In-app is a intuitive pop up style checkout. On clicking the Subscribe/Checkout button, a pop up would open where your customers will have to enter their account and payment details. You can choose to configure your brand elements, fields, display charges, taxes, a thank you message and play around with multiple workflows to suit your business needs!

Here is a sample of the In-app Checkout.

Users signing up from Feb 06, 2018 will have In-app checkout enabled by default. In case you are using the single page Checkout and wish to try In-app checkout, please watch the below video.

Note

This is applicable only in Test Site. Please contact support@chargebee.com  to enable it in the Live Site.

Prerequisites 

Before you configure In-app checkout, please make sure that you:

  • Create Plans: Create the necessary plans in Chargebee. You can create a plan by clicking Product Catalog > Plans > Create New Plan. Learn more.

  • Configure a Payment Gateway: Configure a payment gateway of your choice to process your payments. You can connect with gateways like Stripe, Authorize.net, Braintree, Amazon Payments etc. You can configure a payment gateway of your choice by clicking Settings > Configure Chargebee > Payment Gateways > Add Gateway. Learn more about configuring payment gateways

  • Configure Brand Style: Configure your brand elements such as logo and brand color. These elements will appear on your checkout screen. You can configure your brand elements by selecting Settings > Configure Chargebee > Brand Styles. Learn more about branding.

Options to set up In-app Checkout 

As a merchant, depending on your business model, you can choose how you'd like to set up the Checkout. Chargebee provides you with two options to choose from.

  • Drop in Script to open In-app inside your own app
  • Create a plan specific URL
  • Use API (applicable if you want to handle returning users, collect partial information at your end, authenticate the user at your end etc)

Drop-in Script 

Drop in Script is an easy to use plug-in modal that requires zero developer help. You can easily create a checkout page by adding a script generated for the plan in your HTML page.

Checkout pages generated using drop in script are Level 1 PCI compliant and all that you have to do is fill in this questionnaire.

To use the drop in script to create checkout pages:

  • 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 place it within the tags of the HTML page.
  • Copy the Checkout Button code in the body of the HTML page.

Here is a sample checkout.

Creating Plan specific URL 

In case you would like to have a separate URL for your checkout rather than using the In-app, you have 2 options:

  • Use the single page checkout (Read more about this here)

  • Create a plan specific URL: When you use this option, the user interface of the In-app checkout gets retained but, the checkout screen will open as a new URL rather than a pop up.

Here is the syntax to create a plan specific URL:

https://<site-name>.chargebee.com/hosted_pages/plans/<plan-id>

Replace the site name and plan ID with your site name and plan ID. For example if my site name is ‘docstest-test' and my plan ID is 'sapphire' then this is how my URL would look like

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

This is particularly useful if you are using a website that does not allow you to add scripts.

Checkout via API 

Checkout via API is extremely useful when you want to have a user management or authentication system at your end.

Here is a quick example when you'd want to choose Checkout via API instead of 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 etc along with his address, email and store it in his database instead of Chargebee. But, 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 partial information at his end and then use Chargebee Checkout API to collect the remaining information (Specifically payment details for example). Chargebee will take care of the PCI Compliance, all that James has to do is fill in this questionnaire.

Benefits of using API integration:

  • Allows you to manage authentication, collect partial information in your app or website etc
  • Allows you to override plans and add-ons pricing during checkout itself.
  • 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 customer)

Checkout via API would require developer efforts from your end. Please refer to this documentation to learn more.

Was this article helpful?
Loading…