📍 Bolt Help / Core Products / Embedded Accounts / Implement the Account Checkbox

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.

Required for Bolt Account Creation

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.

Bolt provides an embedded component for collecting consent and displaying terms and conditions.

1. Create and Mount the Component

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

const accountCheckboxComponent = bolt.create("account_checkbox", 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;
 };
}

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

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

(Optional) Unmount Account Checkbox

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.

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

Next Step

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

📖On This Page
Filter by Section
Filter by Topic