Shop Pay Installments Form Recalc Trigger

[Max_Sadlowski]

Hi there,

Wondering if anyone could assist with this. We have inserted the form in our theme, but for some reason our changing of variants is not triggering the form to recalculate and show the right details to the user. I can confirm that the right tag is in place: `{{ form | payment_terms }}` and it loads fine, includes all the variants in the compiled html, and properly sits under the price inside the product form. The variant switch does not trigger it to update. 

I am looking for the right function to call that would allow us to push a different variantID into the form and recalculate so it shows correctly. Any assistance is appreciated!

[arringtonm]

Hi Max, 

I'm encountering the same issue and believe it is because of the variant structure for us ("Loading multiple products on a single product page"):

https://community.shopify.com/c/Shopify-Design/Shop-Pay-Installments-Limitation-Dynamically-Updating...

Have you found a workaround? 

[Max_Sadlowski]

@arringtonm I have not found a workaround, we had to abandon this for the merchant with this issue for the time being. I tried many different avenues but wasn't able to get any answer on this. 

[arringtonm]

It's maddening that Shopify doesn't have this working natively.

Not ideal (or pretty!) but this is the interim solution I hacked out last night which is triggered by an event listener on price changes:

updateShopPayBanner() {
      const price = this.product['variants']['edges'][0]['node']['price'];

      const shopPayBannerEl = document.getElementsByTagName('shopify-payment-terms')[0];
      const shopPayMetadata = JSON.parse(shopPayBannerEl.attributes['shopify-meta'].value);

      const priceString = '$' + (price / 4).toFixed(2);
      const isEligible = price >= parseInt(shopPayMetadata['min_price'].replace('$','')) && price <= parseInt(shopPayMetadata['max_price'].replace('$','')) ? true : false;

      shopPayMetadata["variants"][0]["eligible"] = isEligible;
      shopPayMetadata["variants"][0]["price"] = priceString;

      // set Shop Pay internals to keep it updated, but doesn't seem to do anything:
      shopPayBannerEl.setAttribute('shopify-meta', JSON.stringify(shopPayMetadata));  

      // override Shop Pay visual component innerHTML: 
      const shopPayLogo = 'with <shop-pay-logo role="img" aria-labelledby="shopify-payment-terms-shop-pay-logo" shopify-payment-terms-background="#FFF"></shop-pay-logo>'
      const shopPayInnerTextStatic = 'Pay in full or in 4 interest-free installments ';
      const shopPayInnerTextDynamic = isEligible ? `of ${priceString}` : 'for orders between $50 and $1000' 
      shopPayBannerEl.shadowRoot.querySelector('#shopify-installments-content').innerHTML = `${shopPayInnerTextStatic} ${shopPayInnerTextDynamic} ${shopPayLogo}`;
    },

[Max_Sadlowski]

This is super helpful! I agree it is maddening. It works well when it works, but no docs on how to trigger it to reload makes for difficulties. Thanks for putting this together! The only thing with this is that if Shopify decides to update the banner somehow, then this will surely break, so we wouldn't be able to use in production with this particular client.