Implement the Payment Component
REQUIREMENT
Ensure the Bolt Embed Script is available on the page you are installing the payment component.
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>
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.