Thanks for being patient while we implement your feedback to improve the developer experience.
Stencil Docs
Customizing Checkout
Checkout SDK Tutorial

Checkout SDK Overview

The Checkout JS SDK is a JavaScript library of methods for performing actions related to checkout. It includes methods for logging in a customer, adding addresses to the checkout object, and surfacing the shipping and payment methods that a merchant has configured. It’s everything you need to build your own custom checkout page on BigCommerce.

Our sample checkout React app (opens in a new tab) is a great place to get started if you prefer to develop within a framework. However, the SDK, built with VanillaJS, is framework agnostic.

This tutorial will walk you through the first steps of building a custom checkout directly into the control panel to illustrate this point. At the end of the tutorial, you will have installed the Checkout SDK, created a new JavaScript module for your custom checkout, and console logged the checkout object.

Prerequisites

Installing the Checkout JS SDK

  1. Open your terminal and navigate to your theme's directory.

For example, cd cornerstone

  1. Run the following command:

npm install --save @bigcommerce/checkout-sdk

Creating a checkout-loader.js file

In your text editor, create a file called checkout-loader.js with the following content:

script.onload = function () {
    checkoutKitLoader.load('checkout-sdk')
        .then(function (module) {
            var checkoutService = module.createCheckoutService();
            return checkoutService.loadCheckout(window.checkoutConfig.checkoutId);
        })
        .then(function (state) {
            console.log('Checkout SDK Quickstart', state.data.getCheckout());
            document.getElementById(window.checkoutConfig.containerId).innerHTML = 'Checkout ID: ' + state.data.getCheckout().id;
        });
};
script.src = 'https://checkout-sdk.bigcommerce.com/v1/loader.js';
document.head.appendChild(script);

Installing your custom checkout

For information on installing the checkout file generated in the previous step, see Installing Custom Checkouts.

On the checkout page, you will see the script, the checkout ID on the screen, and in the developer console, you will see the entire available checkout object.

Logging the Checkout Object

  1. Navigate to the storefront and open your browser console.
  2. Add an item to your cart and proceed to the checkout page. The checkout page will be blank below the header.
  3. Note the checkout object logged to the console.

Resources

Sample apps

Related articles