Implementing the Authorization Modal

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.

Shopper Experience

After a shopper’s Bolt Account is detected, they are prompted to input their one-time passcode (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.

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.

<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>

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:

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.

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:

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.

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>

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.