đź“Ť Bolt Help / Platforms / Adobe Commerce / Adobe Commerce - Managed Checkout / SSO Commerce for Adobe Commerce / Set Up SSO Commerce for Adobe Commerce (2.25.1 & below)
Set Up SSO Commerce for Adobe Commerce (2.25.1 & below)
Learn how to set up SSO Commerce buttons and stylings on your Adobe Commerce storefront. Only for users of versions 2.25.1 and below.

Page Contents

Click to expand.

Prerequisites

  • You have contacted Bolt and begun account activation
  • You have contacted Bolt and requested SSO Commerce to be enabled for your account
  • You have made a copy of your active theme as a backup

How to Set Up SSO Buttons and Scripts

Step 1: Replace all Log in and Track My Order buttons

  1. Log in to the M2 Admin Console.
  2. Navigate to Stores > Configuration > Sales > Payment Methods > Bolt.
  3. Enable Bolt SSO Commerce.

TIP

You can also run the following command instead: sudo php bin/magento config:set payment/boltpay/bolt_sso 1

Examples include:

  • Wishlist buttons
  • My Account buttons

You can specify where a link or button redirects to after successful login, using the following HTML attribute: data-destination-on-success=”{{urls.accounts.example.all}}”

For example, you can redirect to a wishlist when a non-logged in user selects a wishlist link. This would present the SSO Commerce modal for authentication before redirecting the shopper to their wishlist page.

data-destination-on-success=”{{urls.accounts.wishlists.all}}”

Step 2: Install Required Scripts

  1. Navigate to Content > Blocks.
  2. Add a new block:
    • Name: Bolt SSO JS
    • Identifier: bolt-js
  3. Save.
  4. Navigate to Content > Widgets.
  5. Create a new widget:
    • Name: Bolt SSO JS
    • Theme: Select the active theme.
  6. Save.
  7. Navigate to Widget Options.
  8. Add the Bolt SSO JS block.
  9. Scroll to Layout Updates.
  10. Select Display on Every Page.
  11. Choose the Page Header as the container.
  12. Add a script element with the following custom Javascript to the Bolt SSO JS block:
<style>
    .block-amazon-login {
        display: none;
    }

    .form-create-account {
        display: none;
    }

    /* Uncomment to apply the default Bolt look to the SSO button */ 
    /*
    .bolt-account-sso {
        --bolt-account-sso-font-size: 16px;
        --bolt-account-sso-font: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
        --bolt-account-sso-color: #fff;
        background-color: #006cff;
        border-color: #006cff;;
        border-style: solid;
        border-width: 1px;
        border-radius: 4px;
        padding: 12px 32px;
        display: block;
        width: fit-content;
        margin: auto;
        cursor: pointer;
    }

    .bolt-account-sso button {
        background-color: #006cff !important;
        border: none;
    }
    */

    .login-page-sso {
        --bolt-account-sso-font-size: 16px;
        --bolt-account-sso-font: 'Roboto','Helvetica Neue',Helvetica,Arial,sans-serif;
        --bolt-account-sso-color: #fff;
    }

    .login-page-sso button {
        background-color: #18284C;
        border: none;
    }

    .customer-account-index .action.edit,
    .customer-account-index .action.change-password{
        display: none;
    }
    
    .customer-account-edit #change-email {
        display: none;
    }
    
    .customer-account-edit #change-email + label {
        display: none;
    }
    
    .customer-account-edit #change-password {
        display: none;
    }
    
    .customer-account-edit #change-password + label {
        display: none;
    }
    
    .account.customer-address-index .column.main * {
        display: none;
    }
    
    .account.customer-address-index .column.main:before {
        content: 'Addresses managed by Bolt';
    }
    
    .vault-cards-listaction .column.main * {
        display: none;
    }
    
    .vault-cards-listaction .column.main:before {
        content: 'Payment facilitated by Bolt';
    }
    
    .customer-account-index .form-edit-account .fieldset.info,
    .customer-account-index a[href="/customer/address/new"],
    .customer-account-index .form-edit-account .fieldset.password
    {
      display: none;
    }
    
    .customer-account-login .login-container {
        margin-top: 20px;
        justify-content: center;
    }

    .account.customer-address-index .actions-toolbar,
    .account.customer-address-index .action.edit
    {
        display: none;
    }

    #account-nav a[href$="/customer/address/"] {
        display: none;
    }

    .checkout-onepage-success #registration {
        display: none;
    }

</style>

<!-- This script selects and replaces the native sign-in, register, and logout buttons -->
<script>
    function insertButtons() {
        if (typeof BoltAccount === 'undefined') {
            window.setTimeout(insertButtons, 100);
            return;
        }
        BoltAccount.injectButtons();
    }

    function insertAccountScript() {
        var scriptTag = document.getElementById('bolt-account');
        if (scriptTag) {
            return;
        }
        scriptTag = document.createElement('script');
        scriptTag.setAttribute('type', 'text/javascript');
        scriptTag.setAttribute('async', '');
        scriptTag.setAttribute('src', '{account-url}/account.js');
        scriptTag.setAttribute('id', 'bolt-account');
        scriptTag.setAttribute('data-publishable-key', '{publishable-key}');
        document.head.appendChild(scriptTag);
    }

    function replaceButtons() {
        var i;
        var loginButtons = document.querySelectorAll('[href^="{store-url}/customer/account/login/"]')
        var wishlistButtons = document.querySelectorAll('[href^="{store-url}/wishlist"]')
        var registerButtons = document.querySelectorAll('[href="{store-url}/customer/account/create/"]');
        var logoutButtons = document.querySelectorAll('[href="{store-url}/customer/account/logout/"]');

        // one of these buttons should be present. if not, the page likely just hasn't loaded yet
        if (!registerButtons.length && !loginButtons.length && !logoutButtons.length) {
            window.setTimeout(replaceButtons, 100);
            return;
        }

        if (registerButtons.length) {
            for (i = 0; i < registerButtons.length; i++) {
                var registerButton = registerButtons[i];
                registerButton.removeAttribute('href');
                registerButton.setAttribute('class', registerButton.getAttribute('class') + ' bolt-sso-custom');
                registerButton.setAttribute('style', 'cursor:pointer;');
            }
        }

        if (loginButtons.length) {
            for (i = 0; i < loginButtons.length; i++) {
                var loginButton = loginButtons[i];
                loginButton.removeAttribute('href');
                loginButton.setAttribute('class', loginButton.getAttribute('class') + ' bolt-sso-custom');
                loginButton.setAttribute('style', 'cursor:pointer;');
            }
        }

        if (wishlistButtons.length) {
            for (i = 0; i < wishlistButtons.length; i++) {
                var wishlistButton = wishlistButtons[i];
                wishlistButton.removeAttribute('href');
                wishlistButton.setAttribute('class', wishlistButton.getAttribute('class') + ' bolt-sso-custom');
                wishlistButton.setAttribute('data-destination-on-success', '{store-url}/wishlist');
                wishlistButton.setAttribute('style', 'cursor:pointer;');
            }
        }

        if (logoutButtons.length) {
            for (i = 0; i < logoutButtons.length; i++) {
                var logoutButton = logoutButtons[i];
                logoutButton.removeAttribute('href');
                logoutButton.setAttribute('class', logoutButton.getAttribute('class') + ' bolt-sso-custom');
                logoutButton.setAttribute('data-logged-in', 'true');
                logoutButton.setAttribute('style', 'cursor:pointer;');
            }
        }

        // optional - on some stores My account link gets hidden upon login through Bolt
        /*
        require(['jquery', 'Magento_Customer/js/customer-data'], function ($, customerData) {
            var invalidateAccountLink = function(){customerData.invalidate(['account-link']);};
            $(registerButtons).click(invalidateAccountLink);
            $(loginButtons).click(invalidateAccountLink);
            $(logoutButtons).click(invalidateAccountLink);
            $(wishlistButtons).click(invalidateAccountLink);
        });
        */

        insertButtons();
    }

    insertAccountScript();
    replaceButtons();
    
</script>

NOTE

{account-url} should be one of the following:

  • Sandbox: https://account-sandbox.bolt.com
  • Production: https://account.bolt.com

{store-url} should be your Adobe Commerce Store URL.

Step 3: Customize Button Styling

Use the following styles to override the button’s font and icon color:

<style>
    --bolt-account-sso-color: #fff;
    --bolt-account-sso-font: 'Verdana';
    --bolt-account-sso-font-size: 16px;
    --bolt-account-sso-font-weight: 700;
</style>

You can also add classes to the bolt-account-sso div as necessary to customize the style further.

WARNING

Do not replace icon-only buttons. Instead, add class=”bolt-sso-custom" data-logged-in="true/false". This enables the icon button to trigger Bolt SSO instead of redirecting to the platform login page.

Step 4: Replace Login and Create Account Pages

Ensure that the native Login and Create Account pages have their contents replaced with the SSO Commerce login/register button.

Example of Customized Login Page

    <style>
        .login-page-sso {
            --bolt-account-sso-color: #fff;
            --bolt-account-sso-font: Gibson-Regular,Arial,Helvetica,sans-serif;
            background-color: #444;
            border-color: #444;
            border-style: solid;
            border-width: 1px;
            border-radius: 4px;
            padding: 12px 32px;
            display: block;
            width: fit-content;
            margin: auto;
            cursor: pointer;
        }

        .login-page-sso:hover {
            background-color: #666;
        }
    </style>
    <div class="bolt-account-sso login-page-sso bolt-sso-custom"/>

Step 5: Remove the Addresses, Payment Methods, and Account Details Pages

Remove any fields/pages that let the shopper modify their account on the store website, including:

  • addresses
  • payment methods
  • phone/email
  • passwords

Removing these pages prevents shopper confusion and ensures they make all relevant changes from the Bolt Checkout modal. To remove these pages, you can comment out any links or fields related to these pages in the account navigation component.

Step 6: Hide PII on Order Confirmation Page

To protect account security, Bolt SSO Commerce does not log shoppers into newly created and unauthenticated storefront accounts.

The default Adobe Commerce order confirmation page only includes the order number, and is compatible with unauthenticated shopper accounts.

If you use a plugin, widget, or custom script to extend the order confirmation page, consider implementing the following to support an unauthenticated post-checkout experience:

  • Comment out any PII such as shipping or billing address
  • Comment out any buttons that allow the shopper to create an account or modify account details

Step 7: Contact Bolt

Once you have completed setup, contact Bolt so that our team can:

  • Re-run necessary Account Activation steps to capture any newly added accounts.
  • Enable all imported accounts.

Testing

TIP

Bolt recommends setting up a sandbox environment first before making any changes in production. Preview mode does not work for testing Bolt SSO Commerce.

  1. Test the Login/Register button. This action should populate the SSO Modal. Try going all the way through the login flow with your own Bolt account.
  2. Test any Icons or Elements with the id=”bolt-sso-custom” attribute. This action should populate the SSO modal.
# adobe-commerce # sso # magento # adobe

‹

 Set Up SSO Commerce for Adobe Commerce
Disable SSO Commerce for Adobe Commerce

›
Go to Advanced Search
Filter by Section
Filter by Topic