The Authorization Modal displays a prompt that asks shoppers to log into their existing Bolt account directly from your store front end and authorizes the merchant to access their Bolt Account for use in their checkout.
INFO
Upon successful login, your client will receive an authorization code and scope which are necessary for accessing the shopper’s Bolt Account data via our Account APIs.
Shopper Experience
After a shopper’s Bolt Account is detected, they are prompted to input their one-time verification code (OTP) into the Authorization Modal.

If a shopper has a Bolt Account, but has not associated their phone number with it, they’ll be asked to do so after entering their email address and passcode. This step further secures their Bolt Account and provides an additional method for identity verification and account management.

Step 1: Create and Mount the Authorization Modal
Mounting the authorization modal will attach the iframe to your site’s DOM, but will not render it. You must pass the Bolt Publishable Key to create the modal. Replace YOUR_KEY
with your Publishable Key in the example below.
TIP
The Authorization Modal should only be mounted once per page. Additionally, if you have multiple components on the same page, they should be mounted to the same element.
<script>
async function authorizeWithEmail(customerEmail) {
const boltPublishableKey = YOUR_KEY;
const boltEmbedded = Bolt(boltPublishableKey);
const authorizationComponent = boltEmbedded.create(
"authorization_component",
{
style: {
position: "right",
},
}
);
await authorizationComponent.mount("#email-div"); // mount on the div container otherwise the iframe won't render
return await authorizationComponent.authorize({ email: customerEmail });
}
</script>
<div id="email-div">
<input type="email" placeholder="bolt-user@example.com" />
</div>
NOTE
The element passed in on mount is the target of the callout if that style is selected. The element ID
should be the ID
of a container div, not the input field itself. The
authorization component iframe cannot properly render when attached to <input>
elements.
Localization
You can also localize the Bolt modal by adding the language
parameter when instantiating the Bolt modal. The value of this parameter must be in ISO format.
Example
const boltEmbedded = Bolt(boltPublishableKey, {
language: "fr-CA",
});
Step 2: Style the Authorization Modal
You can display the authorization component in one of three ways using the position attribute and one of the following values:
Attribute | Description |
---|---|
left |
Will anchor the modal to the left of the email div to which the component is mounted. |
right |
Will anchor the modal to the left of the email div to which the component is mounted. |
center |
Will align the modal to the center of the page. |
Example
let authorizationComponent = boltEmbedded.create("authorization_component", {
style: { position: "right" },
});
Step 3: Render the Authorization Component
If the current shopper has a Bolt Account, display Bolt’s Authorization Component by calling authorize()
from Bolt’s Javascript library.
The function will return an authorization code and scope.
Example
{
"authorizationCode": "",
"scope": ""
}
The email
parameter is retrieved during the Detect Bolt Account step.
Example
let authorizationResponse = await authorizationComponent.authorize({
email: email,
});
This allows the Bolt Account associated with the email address to be passed to the authorize
function to log in to their Bolt Account and authorize your store to access their account data.
From the modal, shoppers can choose to either:
Shopper Option | Description |
---|---|
Authorize your store | Returns a promise that resolves to a JSON object with the keys, authorizationCode, and scope. |
Exit the modal | Returns a promise that resolved to an undefined value. |
Step 4: Bolt OAuth
The authorization code received from the authorization modal will enable the store to receive the necessary OAuth access tokens. These OAuth tokens will provide your store access to Bolt Account APIs. To enable your store to access Shopper Account data, see the OAuth reference for more information.
The store frontend should send the authorization code to your store backend and exchange the authorization code for the appropriate OAuth tokens using the OAuth Token endpoint.
Step 5: Unmount Authorization Modal (Optional)
To remove the component from the DOM, call the unmount
function on the component instance. It is not required to remove this component before mounting the next component.
authorizationComponent.unmount(); // Promise<void>
Step 6: Detect a Shopper’s Bolt Account
The Authorization Component offers two methods to detect a shopper’s Bolt Account:
- Email Detection, which detects Bolt Shopper Accounts via a shopper’s email address input into the Authorization Modal.
- Account Detection via API, which calls the
v1/account/exists
API to detect Bolt Accounts via a shopper’s email or phone number.
Email Detection
Detect (by email address) whether your shoppers have a Bolt Account using this dedicated component.
Get StartedAccount Detection via API
Detect (by email address or phone number) whether your shoppers have a Bolt Account using our API.
Get Started