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 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

• This tutorial uses Cornerstone. Your theme may differ.
• The theme should be set up for local development. Use Stencil CLI to preview your local changes.

Installing the Checkout JS SDK

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

For example, cd cornerstone

2. 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>

3. 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>

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}}

4. Run Stencil CLI to view your changes.
5. Before navigating to the checkout page, ensure you are logged in to collect cart and checkout information.
6. 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": "PROD-123",
        "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"
}

FAQs

How can I find the Checkout SDK version my custom checkout is currently using?

The Checkout SDK version is included in all API request headers from the checkout.

To find your version:

1. Open Developer Tools in your browser.
2. Load your checkout page.
3. Under the Network tab in Developer Tools, search for x-checkout-sdk-version.

Resources

Sample apps

• Checkout SDK Source Code (BigCommerce GitHub)

Related articles

• Installing Stencil CLI