Bolt Embeddable Checkout SSO allows shoppers more opportunities to log into their Bolt accounts, such as in your Sign In and Registration pages. This gives your shoppers access to everything related to your brand: like past order history, loyalty programs, and a one-click checkout experience across all sites in the Bolt Network. It is still your brand, just powered by Bolt.

Before You Start

Reach out to your Bolt Customer Success Manager and ask them to enable the Bolt Embeddable Checkout SSO feature flag for SFCC Embedded. They will then provide you with your Signing Secret used later during the set up process.

Enable Embeddable Checkout Flag

1. Log into your SFCC Business Manager account.
2. Navigate to Merchant Tools > Site Preferences and select Custom Preferences.
3. Select Bolt Payment Setting - Embedded.
4. Check Enable Bolt Ignite and save.
5. Add your Bolt Signing Secret (retrieved from your Customer Success Manager) and save.

Add Bolt to Template

1. In templates/default/account/login.isml add the following code snippet before the first <isscript> tag:

       <isif condition="${pdict.config.boltIgniteEnabled}">
           <isinclude template="boltEmbed" />
   
           <isscript>
               var assets = require('*/cartridge/scripts/assets.js');
               assets.addJs('/js/boltLogin.js');
           </isscript>
       </isif>
   

Configure Bolt Selectors

The Bolt login modal relies on several SFCC native front end components to attach Bolt components to email fields and other DOM elements. Go to boltEmbed.isml to check that your DOM elements have the correct ids or classes.

window.BoltSelectors = {
    checkoutEmailField: "#email-guest",

    // ----- SSO ----- //

    // Sign In page
    signInEmailField: "#login-form-email",
    forgetPasswordButton: "#password-reset",

    // Registration page
    registerEmailField: "#registration-form-email",

    // Checkout page'
    checkoutEmailSummary: ".customer-summary-email",
    editShippingHeader: ".shipping-section h2",
    shippingSummary: ".address-summary",
    addPayment: ".payment-information",
    paymentSummary: ".payment-details",
};

• Bolt uses the email fields’ keyup to listen for emails with Bolt accounts. After a debounce time, Bolt prompts the shopper with a Login modal. On success, Bolt authenticates the user and sends it to your server to pre-fill shopper information.
• The forgot password button will listen to click events to also load the Login Modal in a similar manner.
• The remaining shipping and payment fields aim to add Bolt Login buttons to your forms for faster checkout.