Getting Started

Building Blocks

Custom Fields

Subscription Features

Localization

Invoices

Credits

Order Management

Billing Features

Taxes

Payment Methods

Direct Debit Payments

Configuring Gateways

Revenue Recovery

Chargebee Moments(Checkout and Portal)

Notifications

Reports and Analytics

Data Privacy & Security

Fraud Management

Migration

Open Source Resources

Other Features

API Integration

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 Moadal box 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 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 in 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 (link to checkout new and existing API - more details page) as this would allow him collect partial information at his end and then use Chargebee Checkout's API to collect the remaining information (Specifically payment details for example) using Chargebee. 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.

Configuring Checkout Settings 

As a merchant, Chargebee provides you a powerful configuration capability that you can use to build the checkout.

To access the configuration screen click Settings > Configure Chargebee > Checkout and Self Serve Portal. You can configure the settings from this screen.

Note

If you are a first time user and would like to use Chargebee Checkout enable the checkout to access the settings.

Show Legal Information:

You can choose to get consent or just display the Terms and Privacy links for your customers while they checkout.

Adding/Editing Quantity of products:

You can allow your customers to edit the quantity of products by enabling the settings shown in the screenshot below.

Merchants can also set a minimum and maximum quantity for their plans using meta configuration. Learn more about this here.

Note

In case you do not want your customers to edit the quantity of the plans, we'd recommend you to not enable the ‘Allow customers to edit the quantity of plans' setting.

Adding/Removing Coupons:

Enable the ‘Allow customers to add/remove coupons' setting in Chargebee in order to allow your customers to add/remove coupons.

In order to add/remove coupons the coupon field must first be configured. To configure that select Settings > Configure Chargebee > Checkout & Self-serve portal > Label. Add ‘Apply coupon' and ‘Enter coupon code'. Learn more about Labels.

Editing/Removing Add-on:

You can allow your customers to edit the quantity or the remove add-ons that you have added along with your plan. To know how to pass an add-on with a plan, refer to this link.

Enable the ‘Allow customers to edit/remove addons' setting to allow your customers to remove the add-on.

Points to be noted:

  • Quantity based add-ons can only be edited.
  • Customers cannot edit/remove mandatory add-ons if you have integrated via drop-in script.

Allow customers to access checkout via API only:

Enabling this option will disable all drop-in script links. In case you have used a drop in script in your site we recommend you to streamline your API workflow first and then enable this setting.

On enabling this option the Grab code link next to your plan will be disabled and the drop in scripts will stop functioning instantly. To use drop-in script again, disable this setting.

Allow customers to have multiple subscriptions:

This allows your customers to create multiple subscriptions using the same payment details.

Allow guest checkout:

Enables customers to checkout as a guest. This option will be visible only for customers whose email address is associated with a customer ID. Your customers can check out without having to sign in to their account. Since the customer does not sign in a new customer will be created and the subscription will be associated to it leading to an instance where the same customer has 2 customer IDs in Chargebee.

Note

This is not applicable if you have used Checkout via API.

Allow customers to checkout without payment details:

Chargebee enables you to allow your customers to complete their checkout without adding a payment method to their subscription. This functionality is built in order to offer a smooth checkout experience for your customers who are skeptical about adding a payment method to their subscription before actually trying the product/service.

The checkout without payment method feature enables you to:

  • Offer a free trial for your customers without collecting a payment method.
  • Have a Freemium plan that does not collect payment information during checkout.
  • Offer a 100% discount or a coupon without prompting for a payment method.

This feature is protected using Google Invisible reCAPTCHA to stop spam checkouts by bots. To use this feature:

  • Enable Allow customers to check out without payment methods option.
  • Select when you'd like to apply this functionality from Skip Payment method collection during checkout with checkbox. Available options are Full credit/discount coupons, Plans with free trials and Zero-dollar plans.
Note
  • This feature is applicable only for new subscriptions created through checkout.
  • In case you are using the checkout only to collect payment information from your customers, this option will not have any effect (i.e payment information will be collected from all your customers).
  • You can disable this setting any time you wish in the future. Once you disable this, all the new subscriptions (free/trial/coupons) created post disabling this option will require a payment information during the checkout process itself.

Read the Frequently Asked Questions on Checkout without Payment Method.

Advanced Settings 

Chargebee also allows you to configure certain advanced settings to make work easier for you and your customers. You can find these settings under Settings > Configure Chargebee > Advanced Settings

In this section, you will be able to:

  • Autocomplete Addresses
  • Allow customers to add multiple payment methods
  • Skip order cart during checkout
  • Keep coupon box open
  • Customize plan/addon quantity based on meta configuration
  • Collect PO number from customers
  • Use browser locale if customer locale is not specified
  • Add domains
  • Track abandoned carts
  • Allow customers to log in to the checkout and Self-Serve Portal using OTP or Password

Autocomplete addresses:

Chargebee uses Google Autocomplete to suggest addresses as your customer starts to type in. On enabling this option, your customers can easily choose their address from the suggestion.

Note: Autocomplete addresses also works in the self serve portal when the customer wants to add/edit billing/shipping address. See how.

Allow customers to add multiple payment methods:

Allowing customers to add multiple payment methods against a single customer offers both revenue assurance and flexibility.

  • Revenue Assurance: When one payment method fails, you can be assured that Chargebee will try another, with the least amount of hassle to you and your customers.
  • Flexibility: You can charge certain payments to a particular payment method and others to an alternative payment method.

Enabling the ‘Allow customers to add multiple payment methods' will allow your customers to add as many payment methods that they want using the checkout screen.

Once you have collected multiple payment methods for a Customer, you or your customer can tag one as a Primary payment method and another as a Backup payment method.

Skip order cart during checkout:

On enabling this option, your customers will not be able to view the order screen. They will be taken to the Account details screen directly. Click to know about the different screens in checkout.

Keep coupon box open:

Enabling this option will display the coupon box during checkout.

Disabling this option will show a Apply coupon link in the checkout. Customers can apply coupons by clicking the link.

Customize plan/addon quantity based on meta configuration:

Chargebee allows you to perform a backend operation where you can set the minimum and maximum quantity of plans/add-ons etc. Read more about meta configurations here. Enabling this option allows Chargebee to read the configuration and set the quantity based on it. Refer to this section to learn more on setting quantity for plans and add-ons.

Collect PO number from customers:

A Purchase Order (PO) is a document generated by the buyer in order to authorize a purchase transaction. A PO Number uniquely identifies a purchase order and is generally defined by the buyer. The buyer will match the PO number in the invoice to the Purchase Order. Read more.

You can choose to collect this PO number from your customers during checkout by enabling the ‘Collect PO number from customers' option. You also have the option of making it mandatory or not.

This PO number will get updated under the Subscriptions Info section of the subscription.

Use browser locale if customer locale is not specified:

Enabling this option will pick the customers locale from their browser in case they haven't mentioned it. Click here to see how to set locales otherwise.

Add domains:

It is mandatory to whitelist domain names for the purpose of accessing subscription and invoice-related information during callbacks and conversion tracking.

Note

URLs should start with http:// or https:// protocol.

Tracking Abandoned Carts:

When the customer leaves a checkout page unattended for 30 minutes, or when they close the webpage and not return to it, it is counted as an Abandoned Cart. Abandoned cart tracking allows you to measure how many visitors/customers leave the checkout without completing a purchase, leaving items in the cart. Chargebee allows you send email notifications to these customers reminding them to complete the purchase. Learn more about Abandoned carts here.

To enable Chargebee access the customer cart information, you must enable the Track abandoned cart setting.

Note: Tracking data is only kept for 30 days and older data is deleted. This is to prevent the accumulation of user data for longer than is necessary for the purpose.

Allow customers to log in to the checkout and Self-Serve Portal using:

Chargebee allows your customers to login to their self serve portal using a password or a OTP (one time password). This depends upon the configuration that you have setup in your Chargebee account.

Note: This is applicable only for users who have not set up single sign on.

To configure:

  • Select Settings > Configure Chargebee > Checkout and Self Serve portal > Advanced Settings
  • Choose an option under ‘Allow customers to log in to the checkout and Self-Serve Portal using'

Available options are:

  • OTP: A one time password will be sent to the customer's email address. Your customer will have to enter that to login to the self serve portal.
  • Password or OTP: Your customers can choose to authenticate via an OTP or a password. In case you have set a password, your customers will be prompted for that first. They can choose to login using an OTP by clicking the Login via one time password link.

Read about setting/changing your password.

Publishing the changes 

Once you enable the necessary settings, you need to publish them. In case you don't they will be saved as a draft. Please do note that the changes that you make will be effective only after you publish. To publish click the Publish button in the top right corner.

Disabling Checkout settings 

You can disable all these settings by clicking the Disable button. Disabling will terminate all the actions pertaining to checkout immediately and your customers will not be able to access Chargebee checkout.

Configuring Fields and Labels 

Fields

As a merchant you can choose the fields that you want to display during checkout. This allows you to collect the necessary information from your customers. You can also set custom fields to collect business specific information.

Navigate to the Settings > Configure Chargebee > Checkout and Self serve portal > Fields tab in Chargebee to configure them.

Enable the fields that you want to show in the checkout. Chargebee allows you to configure the following field information:

Note

Account Information, Billing and Shipping sections need to be enabled from your end. You can enable them by clicking the Enable link next to the section.

  • Account Information: Collects account information such as name, email, company etc. You can choose to add custom fields in this section to collect specific information from customers. Learn more.
  • Custom fields for subscription: Collects subscription-related information from customers such as domain URLs, shipping date, t-shirt size, etc. Learn more.
  • Billing: Collects billing information such as address, phone number, name, VAT number etc. Please do note that to configure tax details such as VAT or GST, you must set billing country as mandatory in your tax settings. Learn more. Further you can choose where you'd like to display the address (i.e., checkout, portal or both checkout and portal)
  • Shipping: Collects shipping information such as shipping address, name, phone number etc. If you'd like to use the same configuration as your billing address enable the ‘Use the same configuration as billing' setting. Your billing address configurations will be copied for shipping address as well. If you do not want to collect billing and shipping address from your customers you can enable the In checkout how the option "Ship to my billing address".
  • Payments: Collects payment related information such as card number, expiry, CVV etc. Card Number and Expiry will be collected by default and stored in your payment gateway.
  • Consent Information: Collects consent from customers to send marketing mailers, etc. Learn more.

Working with Fields

Enabling a Field: You can enable/disable a field by moving the toggle next to the field.

Reordering: You can reorder the fields based on how you'd like it to be displayed in checkout.

Editing a field: You can edit the name of the field, choose to show or hide during checkout.

Available properties are:

Labels 

You can customize the field labels and messages displayed in the Checkout Pages and Self-Serve Portal.

To set/customize the labels, navigate to the Labels section.

You can add the labels by clicking the +Add more copy/text and selecting the copy. View the complete list of labels that you can add here.

In the below example, we are going to add notes that will be displayed during checkout. This note will be displayed for all the users (except trial users) in the Complete order screen during checkout.

This is how it will look during checkout.

Preview Checkout and Self serve portal 

Chargebee's powerful preview functionality allows you to view how the checkout and self serve portal will look for your customers.

To preview checkout and self serve portal,

  • Click the Preview checkout/self serve portal link in the Checkout & Self-Serve Portal page.
  • In the preview screen that opens select Checkout to preview checkout and Portal to preview portal.
  • Select the scenario that you'd like to view under Preview settings.

  • Checkout: You can view the checkout flow for new users and existing users.

  • Portal: Select a customer from the drop down to view how the portal would like for them.

Thank you Page Redirection 

Saying thank you is an integral part in every customer interaction. Chargebee allows you to either pass a small thank you note at the end of the transaction or redirect them to a custom URL.

Adding thank you note:

  • Select Settings > Configure Chargebee > Checkout and Self Serve portal > Labels (See more on Labels)
  • Click Add more copy/text and search for the term ‘CLOSE'. The search results will vary depending on the scenario (for example: Extend subscription, Gift subscription etc).
  • Add the appropriate label and edit the text (see how to do this).
  • Your "Thank you" note will get added as shown in the image below.

FAQ 

Refer to this page to take a look at the frequently asked questions.

Was this article helpful?
Loading…