Docs
Storefront
Cart and checkout
Checkout SDK
Overview

Getting Started with Checkout SDK

The Checkout 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 a merchant configures. It’s everything you need to build your own custom checkout page on BigCommerce.

Our reference implementation (opens in a new tab) is a great place to start if you prefer to develop within a framework. However, the SDK, built with vanilla JavaScript, is framework agnostic.

This article will walk you through becoming familiar with Checkout SDK and experimenting with building checkouts using Cornerstone. At the end of the article, 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. Add the Checkout SDK loader script to your theme in templates/pages/checkout.html right after {{#partial “page”}}.
<script src="https://checkout-sdk.bigcommerce.com/v1/loader.js"></script>
  1. Then, add an async function right after the Checkout SDK loader script in templates/pages/checkout.html.
<script>
        const initSdk = async () => {
            window.module = await checkoutKitLoader.load('checkout-sdk');
            window.service = module.createCheckoutService();
            window.state = await service.loadCheckout('{{{ checkout.id }}}');
        };
        initSdk();
</script>

  • initSdk() is in charge of loading checkout-sdk, creating the service, and loading checkout with our current cart/checkout id.

  • checkout.content_head contains information for rendering the template to initialize a checkout-js React app.

The checkout.html page should look like this:

{{#partial "head"}}
 
{{{ checkout.checkout_head }}}
{{{ stylesheet '/assets/css/optimized-checkout.css' }}}
{{ getFontsCollection }}
 
<script type="text/javascript">
     window.language = {{{langJson 'optimized_checkout'}}};
</script>
 
{{{head.scripts}}}
 
{{/partial}}
 
{{#partial "page"}}
 
<script src="https://checkout-sdk.bigcommerce.com/v1/loader.js"></script>
 
<script>
    const initSdk = async () => {
        window.module = await checkoutKitLoader.load('checkout-sdk');
        window.service = module.createCheckoutService();
        window.state = await service.loadCheckout('{{{ checkout.id }}}');
        };
       initSdk();
</script>
 
<header class="checkoutHeader optimizedCheckout-header">
     <div class="checkoutHeader-content">
          <h1 class="is-srOnly">{{lang 'checkout.title'}}</h1>
          <h2 class="checkoutHeader-heading">
              <a class="checkoutHeader-link" href="{{urls.home}}">
                 {{#if checkout.header_image}}
                       <img alt="{{settings.store_logo.title}}" class="checkoutHeader-logo" id="logoImage" src="{{ checkout.header_image }}"/>
                 {{ else }}
                       <span class="header-logo-text">{{settings.store_logo.title}}</span>
                 {{/if}}
              </a>
          </h2>
     </div>
</header>
 
 
{{{ checkout.checkout_content }}}
 
{{{ footer.scripts }}}
 
{{/partial}}
 
{{> layout/empty}}
  1. Run Stencil CLI to view your changes.
  2. Before navigating to the checkout page, ensure you are logged in to collect cart and checkout information.
  3. Navigate to the checkout page, and from your developer’s console, execute the following command to fetch cart content:
state.data.getCart();

In the developer console, you can see the entire available cart object. The output will look like this:

{
  "id": "78fbb9bd-0489-4f6f-aeb7-60a697ccb63a",
  "customerId": 0,
  "email": "",
  "currency": {
    "name": "US Dollar",
    "code": "USD",
    "symbol": "$",
    "decimalPlaces": 2
  },
  "isTaxIncluded": true,
  "baseAmount": 57,
  "discountAmount": 0,
  "cartAmount": 57,
  "coupons": [],
  "discounts": [
    {
      "id": "ce448bc8-2f35-40d1-a0a6-f5a7e2882c5c",
      "discountedAmount": 0
    }
  ],
  "lineItems": {
    "physicalItems": [],
    "digitalItems": [
      {
        "id": "ce448bc8-2f35-40d1-a0a6-f5a7e2882c5c",
        "parentId": null,
        "variantId": 5851,
        "productId": 5860,
        "sku": "",
        "name": "Handcrafted Rubber Table",
        "url": "https://example.com/handcrafted-rubber-table",
        "quantity": 1,
        "brand": "",
        "isTaxable": true,
        "imageUrl": "https://cdn11.bigcommerce.com/s-xxxyyyzzz/products/5860/images/588/dzn_Handcrafted-Rubber-Table-7__57890.1685111102.220.290.jpg?c=1",
        "discounts": [],
        "discountAmount": 0,
        "couponAmount": 0,
        "originalPrice": 57,
        "listPrice": 57,
        "salePrice": 57,
        "retailPrice": null,
        "extendedListPrice": 57,
        "extendedSalePrice": 57,
        "comparisonPrice": 57,
        "extendedComparisonPrice": 57,
        "isShippingRequired": false,
        "type": "digital",
        "isMutable": true,
        "options": []
      }
    ],
    "giftCertificates": [],
    "customItems": []
  },
  "createdTime": "2023-07-12T13:59:48+00:00",
  "updatedTime": "2023-07-12T13:59:48+00:00",
  "locale": "en"
}

We can, for example, get or set shipping and billing addresses, sign in customers, apply coupons or gift certificates, initialize payment, or complete orders.

Resources

Sample apps

Related articles

Did you find what you were looking for?
GuideTutorial