Embedded checkout

Introduction

BigCommerce integration uses Embedded Checkout from BigCommerce.

Please ensure that prerequisites have been complete 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.

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

<template>
  <div id="checkout" v-if="!isSuccess"></div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'Checkout',
  setup() {
    onMounted(async () => {
      const cart = await sdk.bigcommerce.getCart({ id: "930a1424-e8e8-4757-b4f6-8de76c8106cb" });
      const embeddedCheckoutUrl =
        cart.data?.redirect_urls?.embedded_checkout_url;
      const service = embedCheckout({
        containerId: 'checkout',
        url: embeddedCheckoutUrl,
        onComplete: async () => {
          document.querySelector('#checkout').innerHTML = '';
          // redirect to success page
        },
        onError,
        onFrameError: onError,
        onSignOut: async () => {
          await sdk.bigcommerce.logoutCustomer();
          // redirect to home page
        }
      });
    });
  }
});
</script>