Implement the Account Checkbox

When a shopper is not using one-click checkout and does not have a Bolt account, best practice is to render a checkbox to collect their consent to creating a Bolt account. If they accept, this enables a one-click checkout experience the next time they return to your store.

Shopper Experience

During checkout, shoppers without a pre-existing Bolt account have the option to opt out of creating one. Bolt provides an embedded component for collecting consent and displaying terms and conditions.

• Expanded View
• Compact View

Implemented with version?: "expanded" in interface Options below.

Implemented with version?: "compact" in interface Options below.

Required for Bolt Account Creation

Shoppers must provide both an email address and a phone number to create a Bolt Account. They must also agree to Bolt’s Terms and Conditions.

If they do not want to create a Bolt Account, they must actively opt out of doing so.

Step 1: Create the Component

1. Create the checkbox by calling the create method on your instance of Bolt embedded.

const accountCheckboxComponent = boltEmbedded.create("account_checkbox", {
  webComponent: true,
});

Customization Options

Options are not required and do not need to be passed. However, if you want to override the defaults, the options are:

interface Options {
defaultValue?: boolean; // default false
version?: "compact" | "expanded"; // default "compact"
listeners?: { // default undefined
  change?: (value: boolean) => void;
};
}

Step 2: Mount the checkbox to the <div> via an id selector:

accountCheckboxComponent.mount("#bolt-account-checkbox-div");

You can build logic to determine the visibility of the checkbox based on whether the shopper is logged into their Bolt account as well as whether their email address is already associated with a Bolt account. For example:

if(!hasBoltAccount && !loggedInToBolt){
  accountCheckboxComponent.mount("#bolt-account-checkbox-div");
}

Step 3: Listen for Changes

You can do this either through the initialization configuration from the previous section (listeners), or anytime after initialization by using the component’s on method.

accountCheckboxComponent.on("change", checked => createBoltAccount = checked); // void

Step 4: Pass Checkbox Result to the Authorization Endpoint

When calling Bolt’s Authorize Payment API, pass the value in create_bolt_account as part of the request object.

Step 5: Unmount Account Checkbox (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.

accountCheckboxComponent.unmount(); // Promise<void>

Next Step

After you implement the Account Checkbox, use the Authorize Payment API to Authorize Payments.