Direct API
Bring your own UI and enhance shopper experiences with Bolt Account data and APIs.
Before You Start
Before you can implement Bolt 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 Accounts, we recommend implementing each component of Accounts in the following order:
| Order | Step | Component Type | Purpose |
|---|---|---|---|
| 1. | Install Bolt Embed Script | Front End Script | Enables Bolt’s Accounts frontend components components to be configured in your storefront. |
| 2. | Implement Auto Login | Front End Accounts Component | Recognizes shoppers with existing Bolt sessions and moves them directly to the payment step. |
| 3. | Implement the Authorization Modal | Front End Component | Enables shoppers with a detected Bolt Account to log in via the One-Time Password modal. You must also detect shopper accounts either via API or via Automatic Email Detection. |
| 4. | Fetch OAuth Token | API | Exchange the authorization code to fetch the OAuth tokens necessary to access the Bolt Account APIs. |
| 5. | Implement Login Status Component | Front End Accounts Component | Displays a shopper’s login status and, if they’re logged in, a Logout button. |
| 6. | Access Shopper Data | API | Accesses the Bolt account APIs to retrieve logged-in shopper payment and shipping information. |
| 7. | Implement Payment Fields | Front End Accounts Component | Enables both logged-in and guest shoppers to transact with the merchant’s storefront. Also includes a guide on customizing payment fields in checkout. |
| 8. | Implement Account Checkbox | Front End Accounts Component | Allows shoppers to create a Bolt account and store information via the Bolt Accounts API. |
| 9. | Authorize Payment | API | Enables payment authorization. |
| 10. | Set Up Back Office Operations | API | Enables back office operations through use of Bolt’s Transaction API to send transaction status updates. |
| (OPTIONAL) | Call Shopper Logout | Method | A front end call that allows the shopper to logout of their Bolt Account from your store and clears logged in Bolt Account sessions across multiple sites on the browser. |
| (OPTIONAL) | Use Webhook Events | API | An optional step that allows merchants to utilize a transaction webhooks service to receive updates on transaction events. |
| (OPTIONAL) | Implement PayPal for Accounts | API | Enables tokenized PayPal payments for your Accounts implementation. |
| (OPTIONAL) | Implement Data Event Tracking | Front End Accounts Component | Merchants with custom cart implementations can invoke an analytics method that tracks checkout funnel events. |
Front-End Component Previews
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.