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
- This tutorial uses Cornerstone (opens in a new tab). Your theme may differ.
- The theme should be set up for local development.
Installing the Checkout JS SDK
- Open your terminal and navigate to your theme's directory.
For example, cd cornerstone
- 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
- Navigate to the storefront and open your browser console.
- Add an item to your cart and proceed to the checkout page. The checkout page will be blank below the header.
- Note the checkout object logged to the console.
Resources
Sample apps
- Checkout SDK Source Code (opens in a new tab) (BigCommerce GitHub)