Embedded Checkout

Chargebee offers multiple options to integrate its hosted checkout, such as Drop-in script, Hosted Pages API, or Payment Link. These integration options allow you to use the checkout in your web application either as a standalone page or as an overlay. The embedded checkout feature allows you to embed the Chargebee hosted checkout within your web pages as an iframe. Embedded checkout provides a better integration experience compared to relying on a standalone page setup.

Prerequisite

Ensure you enable and configure full-page layout in your Chargebee site. Configure your checkout settings, styling, and customization to suit your brand.

How does embedding checkout work?

Embedding a hosted checkout involves two steps:

1. Integrating Checkout
2. Embedding Checkout

Let's dive deeper into these steps:

Step 1: Integrating Checkout

Before you embed the full-page checkout, decide how you want to integrate the checkout option that will display on your web page. Based on the customer's use case, choose one of the following options:

• Via Drop-in script: Generate and copy the drop-in script from the Chargebee app and add the script to your HTML webpage. This takes care of creating a cart and the associated checkout flow. Learn more about Drop-in script integration.
• Via payment link: Use the Integrate with Chargebee wizard to generate reusable payment links from the Chargebee app. Learn more about payment link integration.
• Via Hosted Pages API: Deploy a cloud solution that uses an API endpoint to make server-to-server API calls to Chargebee, obtain the hosted page, and pass the hosted page URL to the web app via APIs. This mode of integration gives you control to override the predefined configuration for a particular checkout session. Learn more about Hosted Pages API integration.

Step 2: Embedding Checkout

Depending on your mode of checkout integration, you would either have a cart object prepared (Drop-in integration) or a hosted page URL (payment link URL or hosted page URL obtained via API).

Embedding checkout involves the following steps:

1. Create an HTML container: Once you have prepared your checkout session, create an HTML widget space to contain the checkout form. Style and size it appropriately to allocate sufficient screen real estate for checkout.
2. Mount the checkout in the HTML container: Once the container is ready, mount the checkout within the designated placeholder element. Incorporate the checkout using methods tailored to the specific integration modes.
3. Resize the checkout iframe: Ensure the iframe containing your embedded checkout page dynamically resizes to fit its content. Use the resize callback function to automatically adjust the iframe height based on interactions within the checkout page.

Learn more about creating an HTML container, mounting the checkout, and resizing the embedded checkout.

Manage the embedded checkout via callbacks

Callbacks are functions that trigger additional actions following specific events within the checkout flow. By using callbacks, you can incorporate supplementary functions, customize event triggers, and gain precise control over navigation and transitions. This flexibility extends to error handling and cross-platform compatibility, ensuring a consistent checkout experience.

Learn more about callback functions.

Redirection

By default, when you provide a redirect URL for a plan in the Chargebee app, you are redirected to the set web page. For better redirection handling within your application, use the success callback function. Callbacks allow you to have better control over redirection.