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:

• One Page
• Three Page

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.

Prerequisites

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:
   1. https://github.com/bold-commerce/checkout-backend
   2. https://github.com/bold-commerce/checkout-frontend-library
   3. https://github.com/bold-commerce/checkout-express-pay-library
   4. https://github.com/bold-commerce/checkout-experience-templates

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

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:

• Window.location.href
• Window.location.hostname
• Window.location.pathname
• Window.history.replaceState
• Window.innerWidth
• Window.addEventListener
• Window.removeEventListener
• Window.scrollTo
• Window.matchMedia

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:

Property	Type	Description
Window.initialTimestamps	IFrontEndEvent or string object	Time stamps set to send event information to track speed.
Window.storeLoadTimesLocally	boolean	Indicates whether to send event information used to track speed.
Window.environment	IEnvironment	A 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.bugsnagApiKey	string	(Optional) An API key Used to connect to BugSnag to report errors as they occur.
Window.customDomain	string	(Optional) A vanity override for the Window.shopAlias URL. Shown to the customer when they are on the checkout page.
Window.enableConsole	boolean	(Optional) Indicates whether to define and extra console.error that is printed to the console as errors happen.
Window.shopIdentifier	string	The identifier of your store, retrieved from the Get Shop Info endpoint.
Window.shopAlias	string	Used to create the URL to access the shop and to compose the URL to access the checkout page.
Window.shopName	string	The name of the store. You can display this on the checkout page.
Window.headerLogoUrl	string	(Optional) The URL of the image of the store's logo. You can display this on the Checkout page.
Window.returnUrl	string	The URL of the cart page. You can display this URL on the checkout page to allow the customer to return to the cart.
Window.loginUrl	string	The URL of the store login page. You can display this URL on the checkout page to allow the customer to log in.
Window.supportEmail	string	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.
Window.platformType	string	The platform the store uses. You can use this to compose the URL to load or redirect the checkout page.
Window.publicOrderId	string	The public order ID that is generated when you initialize an order using the [Initialize Order](/api/orders#operation/Initialize Order) endpoint.
Window.initializedOrder	string	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.