Embedded Accounts

What is Embedded Accounts?

Embedded Accounts gives merchants the ability to access the Bolt Account Network for a simpler, faster, and optimized checkout experience:

  • Build your own checkout experience, powered by Bolt Account APIs, for shoppers on your storefront site who have an existing Bolt Account.
  • Allow shoppers to create a Bolt account so that they can receive an optimized checkout experience in subsequent checkouts with the merchant.
  • Seamlessly complete payment transactions with existing Bolt Account data as well as new shopper data.

Primary Features

Follow Bolt’s Embedded Accounts set up guides to implement:

  • A Bolt Account Login Modal that will seamlessly embed into your storefront site’s checkout page, seen by shoppers who already have a Bolt Account.
  • Bolt Account APIs that will enable you to access and update shopper data with proper authorization from the shopper.
  • Payment APIs that will enable you to successfully transact with shopper data and tokenized credit card information.

Add on Fraud Protection

Bolt’s Fraud Protection is now available with embedded checkout to merchants who meet certain annual GMV qualifications. Our advanced models gather behavioral customer data and transaction details to detect and block fraudulent transactions before they can impact your business.

If your annual GMV is in our qualifying range, you can apply today from Bolt Merchant Dashboard > Fraud Protection.

Learn more about the application process at Fraud Protection FAQs.

How to Set up Embedded Accounts

Before You Start

Before you can implement Bolt Embedded Accounts, you must have an active Bolt Merchant Account. Reach out to Bolt’s Sales Team to get your Bolt Merchant Account!

Setup Steps by Component

To set up Embedded Accounts, we recommend implementing each component of Embedded Accounts in the following order:

Order Step Component Type Purpose
1. Install Bolt Embed Script Front End Script Enables Bolt’s Embedded Accounts frontend components components to be configured in your storefront.
2. Implement Auto Login Front End Embedded Component Recognizes shoppers with existing Bolt sessions and moves directly to the payment step.
3. Enable Bolt Account Detection API If no active shopper session was detected, prompts shopper to input identification and checks Bolt account data to determine whether an account exists.
4. Implement the Authorization Modal Front End Embedded Component Enables shoppers with a Bolt account to log in via the One-Time Password modal.
5. Access Shopper Data API Accesses the Bolt account APIs for logged-in shopper payment and shipping information.
6. Implement Payment Fields Front End Embedded Component Enables both logged-in and guest shoppers to transact with the merchant’s storefront.
7. Implement Account Checkbox Front End Embedded Component Allows shoppers to create a Bolt account and store information via the Bolt Accounts API.
8. Authorize Payment API Enables payment authorization.
9. (OPTIONAL) Use Webhook Events API An optional step that allows merchants to utilize a transaction webhooks service to receive updates on transaction events.
10. (OPTIONAL) Set Up Back Office Operations API Enables back office operations through use of Bolt’s Transaction API to send transaction status updates.
11. (OPTIONAL) Customize Checkout Front End Embedded Component Use CSS to customize various Bolt Checkout elements, fields, and components.

Shopper Experiences

With a Pre-Existing Bolt Account

The shopper enters their email address into the input field and, if it is tied to an already existing Bolt Account, they’ll then be asked to log in via OTP (a One-Time Password) through the Authentication Modal.

sequenceDiagram Shopper->>+Merchant Checkout: Enters Email Address into Input Field Merchant Checkout->>+Bolt Back End: Detects if Bolt Account Already Exists Bolt Back End-->>Merchant Checkout: Bolt Account Exists Merchant Checkout->>+Bolt Login Modal: Authorization Modal Opens Bolt Login Modal-->>Shopper: Modal Prompts for Shopper to Enter OTP Shopper->>Bolt Login Modal: Shopper Inputs OTP into Modal Bolt Login Modal-->>Merchant Checkout: Send OAuth Code to Authenticate Shopper Merchant Checkout-->Merchant Back End: OAuth Code, Tokens (Access, Refresh, ID), and API Key Merchant Back End-->>Merchant Checkout: Session Cookie Merchant Checkout->>Merchant Back End: Request Bolt Account Details Merchant Back End->>Bolt Back End: Fetch Bolt Account Details + Access Token Bolt Back End-->>Merchant Back End: Send Bolt Account Details Merchant Back End-->>Merchant Checkout: Send Bolt Account Details Merchant Checkout-->>Shopper: Display Logged-in Checkout Merchant Back End->>+Shopper: Display order confirmation page.

Without an Existing Bolt Account

The shopper enters their email address into the input field and, if it is not tied to an already existing Bolt Account, they’ll proceed through the checkout, entering their payment information.

At this stage of checkout, shoppers are able to choose whether they would like to save their information and create a Bolt Account. Regardless of their choice, their transaction is then authorized and captured.

sequenceDiagram Shopper->>+Merchant Checkout: Enters Email Merchant Checkout->>+Bolt Back End: Check if Bolt account exists. Bolt Back End->>+Merchant Checkout: Bolt account does not exist. Note over Merchant Checkout: Display Guest Checkout UI. Shopper->>+Merchant Checkout: Adds credit card details. Shopper->>+Merchant Checkout: Places order and pays. Merchant Checkout->>+Bolt Back End: Tokenize credit card. Bolt Back End->>+Merchant Checkout: Token response. Merchant Checkout->>+Merchant Back End: Authorize Payment Note left of Merchant Checkout: Send Bolt Account Creation checkbox value and token. Merchant Back End->>+Bolt Back End: Authorize Card (Bolt Request) Note left of Merchant Back End: Auto-Capture = true Bolt Back End->>+Payment Processor: Authorize & Capture Payment Processor->>+Bolt Back End: Authorize & Capture Response Bolt Back End->>+Merchant Back End: Bolt Authorization Response Merchant Back End->>+Shopper: Display order confirmation page.
📖On This Page