📍 Bolt Help / Core Products / Accounts / Direct API / Implement the Account Checkbox
Implement the Account Checkbox
Allow shoppers to consent to Bolt Account creation.

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.

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

Full View of the Create Account Component

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

Compact View of the Create Account Component

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.

Element Description
Email Address Used as a unique ID for the Bolt account.
Mobile Phone Used for text messages, One-Time Passwords, and fraud signals.
Bolt Account Opt-out Enables shoppers to opt out of creating a Bolt account. Depending on the user type, the text either displays consent to create an account or consent to link Bolt and merchant storefront accounts.
Bolt Terms & Conditions Links to Bolt’s terms of use and privacy policy.

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.

Filter by Section
Filter by Topic