How to customize the In-app checkout pages (HPv3) in Chargebee?

Problem Statement

You want to know how to customize the in-app checkout pages (hpv3) in chargebee.

Scope

Configuring checkout using Chargebee js.

Checkout API

Solution

Chargebee's PCI-compliant checkout pages can be used to collect customer information, and payment details and create a subscription during the sign-up process. The latest version of the checkout is an in-app modal box that can be added to your website so customers enter payment information without having to leave your website.

There are 2 ways to integrate the checkout page with your system:

1. Drop-in Script

• The drop-in script uses Chargebee's ready-to-use Chargebee js to embed the checkout on your website. This method requires minimal development effort and the security is taken care of by us since the checkout pages are PCI-compliant.

• To integrate the checkout page using this option, navigate to Product Catalog > Plans > Select a Plan > Grab code OR

• Or, navigate to Settings > Configure Chargebee > Checkout & Portal > Integrate with Chargebee and copy the code.

• Copy the Chargebee js in the header of your webpage and add the checkout script in the checkout button of the plan.

• Insert the Plan code in the Buy/Subscribe button, this needs to be done for each plan you have on your website, using the corresponding plan code from Chargebee.

The checkout button would be linked to the checkout and when clicked, the checkout popup will appear.

2. Checkout API

• You can call the checkout API if you're integrating using Chargebee's API. This would require developer assistance on your end as it purely depends on how your workflow is set up.

• Here's more on the steps involved

• Here's our checkout API documentation

There are customization options available for the in-app checkout, where you would be able to edit the company logo, fields appearing in the checkout, etc.

Please follow the below steps to be able to accomplish the desired functionality:

1. Navigate to Settings > Configure Chargebee > Checkout & Self-serve portal. You would be able to make the changes to the settings from this page and please make sure to click on the "Publish" button to apply the changes. Refer to this link for more information.

2. To be able to customize or edit your checkout page, please click on "Add logo and color" to be able to add your Logo, Icon & Favicon to your checkout page and also customize the Brand color. You could also customize and preview the customer-facing essentials such as Invoices, emails, etc.

3. You would be able to edit the field, label, and configuration by referring to this Chargebee document on Configuring Fields and Labels.

4. To Preview these changes, please click on the "Preview Checkout/Portal"