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

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.

Filter by Section
Filter by Topic