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 input their one-time passcode (OTP) into the Authorization Modal.

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>

Next Step

After you implement the Authorization Modal, you will implement the Login Status front-end component to display a shopper’s login status and, if they’re logged in, a Logout button.