Embedded checkout

Introduction

BigCommerce integration uses Embedded Checkout from BigCommerce.

Please ensure that prerequisites have been completed and Alokai with BigCommerce have been configured.

Loading the Embedded checkout

Authentication on Checkout

BigCommerce returns the embedded checkout URL together with the cart response. With each of the cart operations, such as: Get Cart, Add Items to Cart, Remove Items from Cart, Update Cart Item, Create Cart, Alokai's middleware will generate a Customers JWT token and will pass it to the url_redirects for the Embedded Checkout URL. This will ensure that when the checkout is embedded, an SSO login will be performed on the BigCommerce side and the user will be authenticated for checkout.

Embedding the Checkout on Front End

The Alokai Storefront uses a redirect-based checkout by default. The example below shows an alternative approach using BigCommerce's Embedded Checkout, which renders the checkout within an iframe on your page.

Here is an example of a checkout component with the minimum code required to load the Embedded Checkout.

"use client";

import { useEffect, useState } from "react";
import { useSdk } from "@/sdk/alokai-context";
import { embedCheckout } from "@bigcommerce/checkout-sdk";

export function Checkout({ cartId }: { cartId: string }) {
  const sdk = useSdk();
  const [isSuccess, setIsSuccess] = useState(false);

  useEffect(() => {
    const initCheckout = async () => {
      const cart = await sdk.commerce.getCart({ id: cartId });
      const embeddedCheckoutUrl = cart.data?.redirect_urls?.embedded_checkout_url;

      embedCheckout({
        containerId: "checkout",
        url: embeddedCheckoutUrl,
        onComplete: async () => {
          setIsSuccess(true);
          // redirect to success page
        },
        onError: (error) => console.error(error),
        onFrameError: (error) => console.error(error),
        onSignOut: async () => {
          await sdk.commerce.logoutCustomer();
          // redirect to home page
        },
      });
    };

    initCheckout();
  }, [cartId]);

  if (isSuccess) return null;

  return <div id="checkout" />;
}