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.