Custom Checkout Flow
A checkout flow is an optimized checkout experience designed to serve a specific segment of shoppers.
Bold Checkout provides two options for creating with checkout flows: use a Bold-hosted flow, or build your own self-hosted flow. This example project provides all the resources you need to start building your own self-hosted checkout flow, which enables you to have full control over the visual appearance and functionality of your checkout.
To learn more about flows, visit the Concepts section.
Custom flows with the Checkout Experience Templates
While you can build any checkout interface from scratch, Bold provides the Checkout Experience Templates as examples of standard Bold Checkout user interfaces. These templates also enable you to access API libraries to easily customize user experience.
Potential use cases
There are endless use cases for self-hosted checkout flows. The following list includes just a few:
- A mobile flow triggered by an ad in a social media app.
- A desktop flow aimed towards authenticated users.
- A kiosk flow that helps in-store shoppers.
Reference architecture
The following reference architecture shows how the Checkout Experience Templates interact with your application and Bold to create a self-hosted checkout flow:
Architecture requirements
Creating a self-hosted checkout flow with the Bold APIs requires the following technologies:
-
The Bold Checkout app installed on your store, which enables you to use the Checkout Frontend, Checkout Backend, and Checkout Admin APIs.
-
An ecommerce platform, which provides product inventory management, maintains customer records, and hosts site pages.
-
A frontend application, which allows you to customize your users’ checkout experience and align user interface elements with your brand. In this example, this functionality is provided by the Open Source Checkout Templates.
-
A backend application, which provides routing functionality, initializes orders via the Bold Checkout Backend API, and serves the base HTML pages that host your checkout user interface. All custom checkout flows must be self-hosted. In this example, this functionality is provided by the Checkout Experience Backend project.
noteThe backend application is used to call the Checkout Backend API. This API requires tokens with special privileges that are not safe to share publicly, so it is important to make these calls from a controlled environment.
Solution details
For the full instructions on building a custom, self-hosted checkout flow, refer to Create a Self-Hosted Checkout Flow.
Need help?
If you have any questions during development, reach out to the Customer Success team.