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.
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
- Create the checkbox by calling the
create
method on your instance of Bolt embedded.
const accountCheckboxComponent = boltEmbedded.create("account_checkbox", {
webComponent: true,
});
RECOMMENDED
Be sure to include webComponent: true
to ensure styling changes to your site will not impact the Account Checkbox component.
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.