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.
- 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.
- 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:
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:
<!-- 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:
|Time stamps set to send event information to track speed.|
|Indicates whether to send event information used to track speed.|
|A variable that sets the type of environment the app is running in order to call the correct Bold Checkout APIs. Possible values are |
|(Optional) An API key Used to connect to BugSnag to report errors as they occur.|
|(Optional) A vanity override for the |
|(Optional) Indicates whether to define and extra |
|The identifier of your store, retrieved from the Get Shop Info endpoint.|
|Used to create the URL to access the shop and to compose the URL to access the checkout page.|
|The name of the store. You can display this on the checkout page.|
|(Optional) The URL of the image of the store's logo. You can display this on the Checkout page.|
|The URL of the cart page. You can display this URL on the checkout page to allow the customer to return to the cart.|
|The URL of the store login page. You can display this URL on the checkout page to allow the customer to log in.|
|An 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.|
|The platform the store uses. You can use this to compose the URL to load or redirect the checkout page.|
|The public order ID that is generated when you initialize an order using the [Initialize Order](/api/orders#operation/Initialize Order) endpoint.|
|The 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.