rerender when price on single product changes

modules.local/ppcp-button/resources/js/button.js

@@ -27,6 +27,7 @@ const bootstrap = () => {
         const singleProductBootstrap = new SingleProductBootstap(
             PayPalCommerceGateway,
             renderer,
+            messageRenderer,
         );
 
         singleProductBootstrap.init();

modules.local/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js

@@ -3,9 +3,10 @@ import UpdateCart from "../Helper/UpdateCart";
 import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
 
 class SingleProductBootstap {
-    constructor(gateway, renderer) {
+    constructor(gateway, renderer, messages) {
         this.gateway = gateway;
         this.renderer = renderer;
+        this.messages = messages;
     }
 
     init() {
@@ -35,6 +36,15 @@ class SingleProductBootstap {
             () => {
                 this.renderer.showButtons(this.gateway.button.wrapper);
                 this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
+                let priceText = "0";
+                if (document.querySelector('form.cart ins .woocommerce-Price-amount')) {
+                    priceText = document.querySelector('form.cart ins .woocommerce-Price-amount').innerText;
+                }
+                else if (document.querySelector('form.cart .woocommerce-Price-amount')) {
+                    priceText = document.querySelector('form.cart .woocommerce-Price-amount').innerText;
+                }
+                const amount = parseInt(priceText.replace(/([^\d,\.\s]*)/g, ''));
+                this.messages.renderWithAmount(amount)
             },
             () => {
                 this.renderer.hideButtons(this.gateway.button.wrapper);

modules.local/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js

@@ -5,10 +5,7 @@ class MessageRenderer {
     }
 
     render() {
-        if (typeof paypal.Messages === 'undefined' || typeof this.config.wrapper === 'undefined' ) {
+        if (! this.shouldRender()) {
-            return;
-        }
-        if (! document.querySelector(this.config.wrapper)) {
             return;
         }
 
@@ -18,5 +15,30 @@ class MessageRenderer {
             style: this.config.style
         }).render(this.config.wrapper);
     }
+
+    renderWithAmount(amount) {
+
+        if (! this.shouldRender()) {
+            return;
+        }
+
+        console.log(amount);
+        paypal.Messages({
+            amount,
+            placement: this.config.placement,
+            style: this.config.style
+        }).render(this.config.wrapper);
+    }
+
+    shouldRender() {
+
+        if (typeof paypal.Messages === 'undefined' || typeof this.config.wrapper === 'undefined' ) {
+            return false;
+        }
+        if (! document.querySelector(this.config.wrapper)) {
+            return false;
+        }
+        return true;
+    }
 }
 export default MessageRenderer;