Full Page Checkout 

Overview 

The Full page checkout is an all-in-one checkout page where your customers can see their order details, add contact information, and make payments within a single page. You can customize the checkout page to display your brand elements and fields as per your business needs. The below illustration displays how the Full page checkout appears to customers.

Prerequisites 

Before configuring Full page checkout, you must follow the steps below to create the required records in Chargebee:

1. Create product families.
2. Create plans.
3. Configure the card payment gateway to process your payments.
4. Customize your brand elements like logo and brand color.

Integration options for the Full page checkout 

Chargebee offers the following methods to integrate the Full page checkout depending on your application/website's framework and business model.

• Embedding the Drop-in Script.
• By embedding an Item specific URL.
• Using Chargebee's Hosted Pages API (This method is recommended if you want to authenticate the user at your end, override payment-related information, handle returning users, collect additional information.)

Using Drop-in script to integrate the Full page checkout 

Drop-in Script is a plug-in feature that requires minimal developer help. You can easily create a checkout page by adding a script generated for the plan-item on your HTML page.

As Full page checkout integrated using Drop-in script is Level 1 PCI compliant, you must fill this questionnaire before setting up the integration.
Follow these steps to use the Drop-in Script to integrate the Full page checkout:

1. Sign in to the Chargebee site, go to Settings > Configure Chargebee > Checkout and Self serve portal > Integrate with Chargebee.
2. Select the Product family, Plan, Currency, and Frequency from the drop-down list.
3. Add Addons and Charges if applicable using Add addon and Add charge options.
4. Copy the Header script and paste it within the head element of your website's HTML.
5. Copy the generated Checkout Button Code and hyperlink to the subscribe button in your website's HTML. This way, when a customer clicks the subscribe button, the Full page Checkout opens and displays the above-selected parameters of plan name, frequency, addon, and so on.

Using item-specific URL to integrate the Full page checkout 

This feature allows you to construct a customized URL bound with the necessary plan, addons, charges, and coupons. The resulting URL can then be embedded into the Checkout button on your application/website. This is useful if you are using a website that does not allow you to add JS scripts.For more information, see creating Item Specific URL.

Using the Hosted Pages API to integrate the Full page checkout 

Benefits of using API integration

• Allows you to manage authentication, collect additional information in your application/website.
• Allows you to override plan and add-on pricing during checkout.
• 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).

Using Hosted Pages API to create a Full page checkout is the recommended approach when you already maintain a user-management or authentication system. It gives you control over overriding item price and changing the trial end date. However, this requires significant developer efforts from your end.
Handling payment details via API requires you to be PCI compliant. Fill in this questionnaire if you would like Chargebee to manage your PCI Compliance.