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.
This is applicable only in Test Site. Please contact support@chargebee.com to enable it in the Live Site.
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
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 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:
Here is a sample checkout.
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 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:
Checkout via API would require developer efforts from your end. Please refer to this documentation to learn more.
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.
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.
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:
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.
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:
This feature is protected using Google Invisible reCAPTCHA to stop spam checkouts by bots. To use this feature:
Read the Frequently Asked Questions on Checkout without Payment Method.
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:
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.
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.
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:
Available options are:
Read about setting/changing your password.
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.
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.
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:
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.
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:
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.
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,
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.
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:
Refer to this page to take a look at the frequently asked questions.
