Configuring Checkout

Chargebee provides configuration capability to build the checkout based on your business requirements. The following instructions will help you create a checkout and configure various settings as per your business needs.

To access the configuration

• Sign in to the Chargebee site, go to Settings > Configure Chargebee > Checkout and Self Serve Portal.

Layout tab

This is the first tab that appears when you access the configuration. You can choose the type of checkout you want to create for your customers. The options available are the In-App and Full page checkout. You can also use the layout API parameter to override the default settings. For more information, see API docs for hosted pages.

1. Click the Explore button and click Use Layout You can select only one layout at a time.
2. Click Publish.
3. A confirmation window appears. Click Publish again. The selected layout is set to In Use, as shown in the below screenshot.
   
4. Click Preview to view how the checkout and self-serve portal will look for your customers.

Configuration tab

The configuration tab allows you to configure various settings on your checkout page.

To configure any settings from the list

1. Turn on the toggle for the respective settings.
2. Click Publish to apply the settings for the checkout page.

Checkout

The following options are available for Checkout:

Identify existing customers for checkout access using

Select how you want your existing customers to gain access to Checkout:

Via Chargebee Login

Users log in by entering their email address, after which they receive a one-time password (OTP) via email. Upon their first login, users are prompted to set up a password for future access.

Single Sign On API

Recommended if you manage user authentication in your application. After users sign in to your application, create checkout sessions for them dynamically. This approach enhances the customer experience by eliminating the need for users to sign in again after logging into your application or website.

Show description for all items

Enable this setting to display plan price, addon price, and charge price descriptions on Checkout. Define the descriptions under the Customer-Facing Info section for plan prices, addon prices, and charge prices.

Allow customers to edit quantity for plans

Enable this setting to allow your customers to edit the quantity of products added during checkout.

Allow customers to change addon and charge quantity

Enable this setting to allow your customers to edit the addon and charge quantity.

Allow customers to remove addons and charges

Enable this setting to allow your customers to delete addons. However, You cannot remove charges.

Show recommended addons in Checkout

Enable this setting in Chargebee to display recommended addons as a separate section on the checkout page. Customers can click Add to include the recommended addon in their subscription.

Allow customers to add/remove coupons

Enable this setting in Chargebee to allow your customers to add/remove coupons. For more information, see creating coupons and deleting coupons.

Allow customers to add multiple coupons

Enable this setting in Chargebee to allow your customers to add multiple coupons for a product.

Allow customers to access checkout via API only

Enabling this option will disable all drop-in script links. If you have used a drop-in script for your site, we recommend you 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 the drop-in script again, disable this setting.

Allow customers to have multiple subscriptions

Enable this setting to allow your customers to create multiple subscriptions using the same payment details.

Cancel URL

You can use this setting to configure the URL on your website or application to which Chargebee will redirect customers to navigate if they choose to cancel the checkout action. Any cancel URL passed via API will override this URL.

Checkout: One time payments

This setting allows you to create a checkout page to handle payments for one-time products and services without linking them to a subscription. To create a one-time checkout page

1. Click Enable.
   
2. The following settings are available to configure a one-time payment checkout page. Click Disable to de-activate the one-time payment checkout page settings as shown in the below screenshot.
   

Allow customers to access checkout via API only

Enabling this option will disable all drop-in script links. If you have used a drop-in script for your site, we recommend you 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 the drop-in script again, disable this setting.

Allow customers to add/remove coupons

Enable this setting in Chargebee to allow your customers to add/remove coupons. For more information, see creating coupons and deleting coupons.

Allow customers to remove products

Enable this setting to remove plans, addons, and charges from the cart during checkout.

Save customers payment method

Enable this setting to ask customers permission to save their payment method during checkout. The available options are: Never, Always, Ask for Customer's permission.

Add a redirect URL

You can use this setting to add a URL where the customer can navigate once they complete a one-time payment. The customer will be redirected to the URL after successful checkout. For more information, see specific URL options.

Advanced settings

Chargebee also allows you to configure certain advanced settings to make the checkout experience for your customers effortless. You can configure the following advance settings while creating a checkout.

Autocomplete addresses

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

Allow customers to add multiple payment methods

This setting will allow your customers to integrate add multiple cards. Using this method, you can accept payments via credit, debit, and prepaid cards from your customers. To use this payment method, you should have an integration with a payment gateway supported by Chargebee and a merchant account in place. For more information see, and merchant account to process online payments.

Skip order cart during checkout

Enable this setting to hide the order screen. The customers will not see their order cart during checkout.

Keep coupon box open

Enable this option to display the coupon box during checkout. Disabling this option will show the Apply coupon link in the checkout. Customers can apply coupons by clicking the link.

Add domains

When you use Chargebee.js on your frontend, you must allowlist your domain(s) for the following features to work:

• Accessing sensitive information such as subscription and invoice details via Chargebee.js callbacks.
• Redirecting users to your domain after a successful Checkout session using a plan-specific redirect URL. (Widely known domains are exempt from this requirement.)
• Integrating any of the following with Checkout:
  • Meta Pixel
  • Google Analytics
  • Google Tag Manager

To allowlist your domain(s), follow these steps:

1. Go to Settings > Configure Chargebee > Checkout & Self-Serve Portal > Advanced Settings > Add domains.

• Select Add domain names or Edit domain names.
• In the text box, enter a comma-separated list of your domain URLs.
• Select Apply to save the changes as a draft.
• Select Publish to apply the changes.

Examples

Here are examples of valid entries in the Add domains text box:

• Single domain: https://foo.com
• Multiple domains: https://foo.com, https://foobar.com
• All subdomains of a domain: https://*.foo.com
• All subdomains of a domain plus another domain: https://*.foo.com, https://foobar.com

Add URLs to Content Security Policy (CSP) on checkout and customer portal pages

To ensure PCI DSS v4.0.1 compliance and safeguard your customers, Chargebee implements an allowlist/strict Content Security Policy (CSP) across Checkout, Portal, other payment pages, and all iframes loaded by Chargebee.js such as Payment Components and Card Components.

If you're using Google Tag Manager (GTM) integration to deploy scripts or other assets on these pages, you must explicitly allowlist them by uploading a JSON configuration in Chargebee Billing. Without this step, the assets will be blocked.

Follow these steps to allowlist scripts and other assets on Chargebee hosted pages using Content Security Policy (CSP):

1. Create a CSP configuration JSON.
2. Go to Configuration > Advanced Settings > Add URLs to Content Security Policy (CSP) on checkout and customer portal pages, and select Add JSON.
   
3. In the Add CSP in JSON format field, paste the copied JSON. The minified version of the configuration JSON must not exceed 5000 characters.
4. Select Apply.

Allow customers to log in to the checkout and self-serve Portal

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

OTP:A one-time password will be sent to the customer's email address. Your customer will have to enter that to sign in to the self-serve portal.

Password or OTP: Your customers can choose to authenticate via OTP or a password. In case you have set a password, your customers will be prompted for that first. They can choose to sign in using an OTP by clicking the Login via one-time password link.

For more information, see setting /changing your password.