If you have a multiple variants with different prices and you want to update the shop pay banner to reflect the correct installment price hen you change a variant. You need to pass the newly selected variant id to the variant-id property( attribute) on the shop pay component.
For example, Shopify renders a native web component for the shop pay banner like so:
As you can see its has the variant-id=“12340001”, if you change this property with javascript to the newly selected variant the component will internally re-render with the correct updated price.
So let’s say you have a select statement with all the variants as options and the variant id as the option value that gets passed back when a new variant is selected. For example:
You need to get the newly selected variant id to pass it to the shop pay component. We can use the on change event listener like so:
//using jQuery syntax or quantdom.js library
$('#variant-list').on('change', function(){
const variantId = $(this).val()
$('shopify-payment-terms').attr('variant-id', variantId) //this will trigger a rerender and update the banner
});
Using vanilla javascript syntax:
document.querySelector('#variant-list').addEventListener('change', function(e){
const variantId = e.target.value
document.querySelector('shop-payment-terms').setAttribute('variant-id', variantId) //trigger rerender
});