Frontend Capabilities

# Embedded Checkout

While the other integration options, i.e., Drop-in Script (opens new window), Payment Link (opens new window) and Hosted Pages via API (opens new window) allow you to use checkout in your web application either as a stand-alone page or as an overlay, the Embedded Checkout allows you to embed the Chargebee Hosted Checkout within your web pages as an iFrame.

Embedding a hosted checkout involves two steps:

  1. Integrating Checkout: Chargebee offers multiple methods to integrate hosted checkout, i.e. via Drop-in Script, Payment Link and Hosted Pages API.
  2. Embedding Checkout: This step is comprised of two steps: a. Creating an HTML container for the checkout b. Mounting the checkout in the HTML container

Let us dive deeper into these steps:

  1. Creating an HTML container: Create an html widget space to contain the checkout form. This container accommodates your checkout session on your webpage. Here is an example of an HTML container.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HoneyComics | Pricing</title>
    <script src="https://js.chargebee.com/v2/chargebee.js" data-cb-site="honeycomics-v3-test"></script>
</head>
<body>
    <!-- Checkout Placeholder Element -->
    <div id="checkout">
        <!-- Chargebee will embed checkout form here -->
    </div>
</body>
</html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

  2. Mounting the checkout in the HTML container: Once the container is ready, mount the checkout between the <div id="checkout"> </div> HTML tags. Checkout can be mounted in the placeholder element by using different approaches based on the mode of integration (drop-in script using cart, URL via the payment link or hosted page via API).

Below are the code samples for embedding checkout for each integration method showcasing the use of the following functions:

  1. createCheckout(): This function creates the checkout page. This method returns a checkout object. The checkout object allows you to control the checkout instance embedded in your page.
  2. checkout.mount(string containerID): This function instructs the checkout to be mounted in the div element of the HTML container that you have created. The containerID to be added to this function can be retrieved from the <div id="checkout"> tag in the HTML container that you have created in the first step.

cart.js (Drop in Integration with Cart)

    async function createCheckoutWithCart() {
    try {
        // Prepare your cart
        const cbInstance = chargebee.getInstance();
        const cart = cbInstance.getCart();

        // Set customer information
        const customer = {
        first_name: "John",
        last_name: "Smith",
        locale: "it",
        billing_address: {
            first_name: "John",
            last_name: "Smith",
            line1: "132, My Street",
            line2: "Kingston, New York",
            state_code: "NY",
            country: "US",
            zip: "12401",
        },
        };
        cart.setCustomer(customer);

        // Initialize and configure the product
        const product = cbInstance.initializeProduct("cbdemo_advanced-USD-monthly", 5);
        product.isItemsModel = true;
        product.setLayout('full_page');
        
        cart.replaceProduct(product);

        // Create the checkout
        const checkout = await chargebee.getInstance().createCheckout({
        cart,
        callbacks: {
            loaded: () => {
            console.log("Checkout opened");
            },
            error: (error: any) => {
            console.error("Error during checkout:", error);
            },
            close: () => {
            console.log("Checkout closed");
            },
            success: (data: { id: string }) => {
            console.log("Checkout success. ID:", data.id);
            },
            step: (value: string) => {
            console.log("Checkout step:", value);
            },
        },
        });

        // Mount checkout on the container
        checkout.mount('#checkout');
    } catch (error) {
        console.error("An error occurred:", error);
    }
    }
    // Call the function to create and mount the checkout
    createCheckoutWithCart();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

url.js (API)

async function createCheckoutWithApi() {
  try {
    const response = await fetch("/create-checkout", {
      method: "POST",
    });

    const { url } = response.json();

    const checkout = await chargebee.getInstance().createCheckout({
      url,
      callbacks: {
        loaded: () => {
          console.log("Checkout opened");
        },
        error: (error: any) => {
          console.error("Error during checkout:", error);
        },
        close: () => {
          console.log("Checkout closed");
        },
        success: (data: { id: string }) => {
          console.log("Checkout success. ID:", data.id);
        },
        step: (value: string) => {
          console.log("Checkout step:", value);
        },
      },
    });

    // Mount checkout on the container
    checkout.mount('#checkout');
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

// Call the function to create and mount the checkout
createCheckoutWithApi();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

url.js (Payment Links)

async function createCheckoutWithPaymentLink() {
  try {
    const paymentLink = "";

    const checkout = await chargebee.getInstance().createCheckout({
      url: paymentLink,
      callbacks: {
        loaded: () => {
          console.log("Checkout opened");
        },
        error: (error: any) => {
          console.error("Error during checkout:", error);
        },
        close: () => {
          console.log("Checkout closed");
        },
        success: (data: { id: string }) => {
          console.log("Checkout success. ID:", data.id);
        },
        step: (value: string) => {
          console.log("Checkout step:", value);
        },
      },
    });

    // Mount checkout on the container
    checkout.mount('#checkout');
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

// Call the function to create and mount the checkout
createCheckoutWithPaymentLink();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Managing the Embedded Checkout via Callbacks

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

Learn more (opens new window) about callback functions.

← Quantity Restriction →