Skip to main content

Implement the Open Source Checkout Templates

Bold provides Open Source Checkout Templates intended to help you build your own headless checkout powered by Bold APIs. These frontend templates provide examples of standard Bold Checkout user interfaces, and they enable you to access API libraries for easy customization of the user experience.

Bold provides two templates:

The following diagram shows how the Open Source Checkout Templates interact with Bold Checkout and your own store:

This document outlines the prerequisites and requirements of the Open Source Checkout Templates and how to get them up and running.


  1. Install Bold Checkout on a store and create an API access token in Bold Account Center. For instructions, refer to the Checkout Getting Started guide.
  2. Submit a support request to Bold for permission to access the required GitHub repos. In your request, include the email addresses that need access, and the following list of repos:

Create a backend application

In order to host an Open Source Checkout Template, you must create a backend application to provide routing functionality, initialize and manage orders via the Bold Checkout Backend, and host the checkout pages.

Bold provides the Checkout Experience Backend project as a reference implementation to help you create your own backend application. Follow the instructions in the README to clone the project and begin using it.

You can also refer to the Build a Headless Checkout page for additional details and resources for setting up a headless checkout backend.

Install the appropriate dependencies

The Open Source Checkout Template is built using the following series of libraries. Follow the instructions in each library's respective README to install and configure it:

  1. Checkout Frontend Library — a JavaScript library that creates a structure for calling the Bold Checkout Frontend APIs. Note that this library calls only the Checkout Frontend API.
  2. Checkout Express Pay Library — a JavaScript library that adds support for Google Pay, Apple Pay, Link (from Stripe), and PayPal Express.

Set up the template

Before you can view the template on your own site, you must complete a few additional steps.

Create a div to load the template

First, you must create a <div> element with the ID main within the file that will initialize your template. The following code snippet shows an example:

<div id="main">
<!-- This div is where the app will run -->

Define the browser Window object

The Open Source Checkout Templates must also have access to the browser's Window object.

In particular, the template requires the following standard properties and methods for the Window object:

In addition, you must add and define certain custom properties that the template expects to use. The following table describes the properties and how they are used:

Window.initialTimestampsIFrontEndEvent or string objectTime stamps set to send event information to track speed.
Window.storeLoadTimesLocallybooleanIndicates whether to send event information used to track speed.
Window.environmentIEnvironmentA variable that sets the type of environment the app is running in order to call the correct Bold Checkout APIs. Possible values are 'production' and 'development'. For example:
Window.environment = {type: 'production'}
Window.bugsnagApiKeystring(Optional) An API key Used to connect to BugSnag to report errors as they occur.
Window.customDomainstring(Optional) A vanity override for the Window.shopAlias URL. Shown to the customer when they are on the checkout page.
Window.enableConsoleboolean(Optional) Indicates whether to define and extra console.error that is printed to the console as errors happen.
Window.shopIdentifierstringThe identifier of your store, retrieved from the Get Shop Info endpoint.
Window.shopAliasstringUsed to create the URL to access the shop and to compose the URL to access the checkout page.
Window.shopNamestringThe name of the store. You can display this on the checkout page.
Window.headerLogoUrlstring(Optional) The URL of the image of the store's logo. You can display this on the Checkout page.
Window.returnUrlstringThe URL of the cart page. You can display this URL on the checkout page to allow the customer to return to the cart.
Window.loginUrlstringThe URL of the store login page. You can display this URL on the checkout page to allow the customer to log in.
Window.supportEmailstringAn email that a customer can use to contact the store. You can display this on the checkout page to allow the customer to contact support.
Window.platformTypestringThe platform the store uses. You can use this to compose the URL to load or redirect the checkout page.
Window.publicOrderIdstringThe public order ID that is generated when you initialize an order using the [Initialize Order](/api/orders#operation/Initialize Order) endpoint.
Window.initializedOrderstringThe application state of an order, returned from a call to the Initialize Order endpoint. If the order is for an authenticated customer, you can use the Add Authenticated Customer endpoint to initialize a checkout session with a logged-in order.

Customize your checkout

Once your own version of the Open Source Checkout Template is up and running, you can make changes to the store's user interface and otherwise customize it in any number of ways.