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 stand-alone page or as an overlay. On the other hand, the Embedded Checkout feature allows you to embed the Chargebee Hosted Checkout within your web pages as an iFrame. An embedded checkout allows for a better integration experience rather than relying on a standalone page setup.

Pre-requisite 

Ensure to enable and configure Full Page Checkout in your Chargebee site and 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 us dive deeper into these steps:

Step 1: Integrating Checkout 

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

• 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 that will make server-to-server API calls to Chargebee, obtain the hosted page, and then pass the hosted page URL to the web app via APIs. However, 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, by now, you would either have a cart object prepared (Drop-in Integration), or a hosted page URL (Payment link URL / Hosted Page URL obtained via API).

Embedding checkout involves the following steps:

1. Creating an HTML container: Once you have prepared your checkout session, create an HTML widget space to contain the checkout form. Ensure that you are styling and sizing it appropriately to allocate sufficient screen real estate for checkout.
2. Mounting the checkout in the HTML container: Once the container is ready, you can mount the checkout within the designated placeholder element. The checkout can be incorporated using various methods tailored to the specific integration modes.
3. Resizing the checkout iFrame: Ensure the iframe containing your embedded checkout page dynamically resizes to fit its content. By leveraging the resize callback function, the iframe will automatically adjust its height based on interactions within the checkout page.

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

Managing 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 have provided a Redirect URL  for a plan in the Chargebee app, you are redirected to the set web page. However, for handling better redirection within your application at your end, you can use the success  callback function, because callbacks allow you to have better control over redirection.