📍 Bolt Help / Add-Ons / SSO Commerce / Embedded Shopper Account Editing / Implement the Payment Component
Implement the Payment Component
Steps to implement the Payment Component from the Embedded Shopper Account Editing add-on.

Page Contents

Click to expand.

REQUIREMENT

Ensure the Bolt Embed Script is available on the page you are installing the payment component.

Step 1: Replace the Cart Platform Default Payment Component

Replace your cart platform’s default payment component with a placeholder div element.

Replace the default component by removing the default payment code block from the source code with the BigCommerce template editor.

Replace it with:

<div id="payments_list" />

In the Magento admin dashboard, write javascript code to select the payment element using querySelector. Then, add the javascript code to Block under Content - Block, then attach the Block to Content - Widget.

Example

<script>
// Check page title and make sure it's executed on the right page
if (document.querySelector("[data-ui-id='page-title-wrapper']")?.innerHTML === "Saved Payment Methods") {
    // create a placeholder div
    var payment_div = document.createElement('div');
    payment_div.setAttribute("id", "payments_list");

    // replace the cart platform default component with the placeholder div
    document.querySelector(".message.info.empty").replaceWith(payment_div)
}
</script>

Step 2: Mount Payment Component

Add the following javascript code to the storefront execution process.

<script>
    function mountPaymentElement() {
      var BoltEmbedded = window.Bolt("${PUBLISHABLE_KEY}");
      var payment_component = BoltEmbedded.create("shopper_payment");
      payment_component.mount("#payments_list");
    }

    // load Bolt script and mount component
    if (window.Bolt) {
        mountPaymentElement();
    } else {
      var embedScript = document.querySelector('#bolt-embed');
      embedScript.addEventListener('load', function() {
          mountPaymentElement();
      });
    }
</script>

Next Steps

Next, embed the Login Button Component into your UI to trigger automatic account detection and login to ensure your shopper’s account editing experience is streamlined.

# accounts

‹

 Implement the Address Component
Implement the SSO Login Button

›