📍 Bolt Help / Developers / Developer Guides / Checkout Setup / Embedded Checkout Setup / Embedded Accounts / Implementing the Authorization Modal

Implementing the Authorization Modal

The Authorization component displays a modal that enables shoppers to log in to their existing Bolt account directly from your store front end.

The Bolt Shopper inputs their One-Time Password (OTP) into the Authorization Modal after their Bolt Account has been detected.

The shopper can also opt to have their password sent via SMS or email.

Upon a successful login, your client will receive an authorization code and scope which will be necessary for accessing the shopper’s Bolt Account data via Bolt Account APIs.

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.

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});
}
Example HTML
<div id="email-div">
    <input type="email"
    placeholder="bolt-user@example.com">
    </input>
</div>

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"});

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"}} );

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.

Bolt's authorization modal, enabled by implementing the Authorization Modal.

The function will return an authorization code and scope. The email parameter is retrieved during the Detect Bolt Account step.

let authorizationResponse = await authorizationComponent.authorize({"email": email});

This allows the Bolt Account associated with the email address passed to the authorizationResponse 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.

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.

Next Step

After you implement the Authorization Modal, you will use the Bolt Account APIs to access Shopper Data for payment and shipping information of those shoppers with existing Bolt Accounts.

📖On This Page