The Email Detection Component allows merchants a faster way to detect shopper accounts directly from our Authorization Component.

Step 1: Add autoAuthorize to the Mounted Authorization Component

You must set autoAuthorize to true within the boltEmbedded.create object of the Authorization Component:

const boltPublishableKey = YOUR_KEY;
const boltEmbedded = Bolt(boltPublishableKey);
const authorizationComponent = boltEmbedded.create("authorization_component", {
  style: { position: "right" },
  autoAuthorize: true,
});
await authorizationComponent.mount("#email-div"); // mount on the div container otherwise the iframe won't render

On Method

Merchants can use the optional on method to receive authorization statuses to check for an account’s existence and authorization.

The On Authorization Component method is used to listen to authorization events and takes two parameters:

1. event name (auto_authorize_complete or auto_account_check_complete) and
2. a call back function.

This method returns an unsubscribe function to clean this listener.

on(eventName: string, fn: (response: AuthorizeEventResponse) => void,): () => void;

Event Names

AuthorizeResult {
  authorizationCode: string; // An authorization code can be exchanged for an access token
  scope: string; // Scope to get an access token for
}

Examples

useEffect(() => {
  return Bolt.on("auto_account_check_complete", (response) => {
    const result = response.result;
    console.log("email", response.email);
    console.log("auto_account_check_complete", result);
  });
});

const autoAccountCheck = Bolt.on("auto_account_check_complete", (response) => {
  const result = response.result;
  console.log("email", response.email);
  console.log("auto_account_check_complete", result);
});

useEffect(() => {
  return Bolt.on("auto_authorize_complete", (response) => {
    const result = response.result;
    console.log("email", response.email);
    console.log("authorized", result);
    if (result instanceof Error) {
      // Display error?
    } else {
      // continue
    }
  });
});

const autoAuth = Bolt.on("auto_authorize_complete", (response) => {
  const result = response.result;
  console.log("email", response.email);
  console.log("authorized", result);
  if (result instanceof Error) {
    // Display error?
  } else {
    // continue
  }
});

Next Step

After you implement the Authorization Modal, you will fetch the OAuth tokens to access Bolt Account APIs.