Before You Start
Setup Steps by Component
To set up Accounts, we recommend implementing each component of Accounts in the following order:
|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
Device Login Component
Implemented with the Auto-Login Component.
OTP Modal Component
Implemented with Authorization Modal Component.
Account Checkbox Component
You can implement either the full account checkbox component, or a more compact view.
version?: "expanded" in Implement Account Checkbox.
version?: "compact" in Implement Account Checkbox.
Payment Fields Component
Implemented with Payment Fields.
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.
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.