📍 Bolt Help / Products / Accounts / Implementing the Authorization Modal
Implementing the Authorization Modal
Enable Bolt Shoppers to login to their Bolt Accounts on your store frontend.

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.

OTP Modal Component

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.

Modal to verify shopper's phone number

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

Use Email Detection to find Bolt Shopper Accounts via a shopper’s email address input into the Authorization Modal.

Filter by Section
Filter by Topic