execute js bootstrap after paypal.com script has been loaded.

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

@@ -4,73 +4,86 @@ import UpdateCart from './modules/UpdateCart';
 import ErrorHandler from './modules/ErrorHandler';
 import CartConfig from "./modules/CartConfig";
 
+const bootstrap = ()=> {
+    const context = PayPalCommerceGateway.context;
+    const errorHandler = new ErrorHandler();
+    const defaultConfigurator = new CartConfig(
+        PayPalCommerceGateway,
+        errorHandler
+    );
+    // Configure mini cart buttons
+    if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
+
+        const renderer = new Renderer(
+            PayPalCommerceGateway.button.mini_cart_wrapper
+        );
+        renderer.render(defaultConfigurator.configuration())
+    }
+    jQuery( document.body ).on( 'wc_fragments_loaded wc_fragments_refreshed', () => {
+        if (! document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
+            return;
+        }
+        const renderer = new Renderer(
+            PayPalCommerceGateway.button.mini_cart_wrapper
+        );
+        renderer.render(defaultConfigurator.configuration())
+    } );
+
+    // Configure context buttons
+    if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
+        return;
+    }
+    const renderer = new Renderer(
+        PayPalCommerceGateway.button.wrapper
+    );
+    let configurator = null;
+    if (context === 'product') {
+        if (! document.querySelector('form.cart')) {
+            return;
+        }
+        const updateCart = new UpdateCart(
+            PayPalCommerceGateway.ajax.change_cart.endpoint,
+            PayPalCommerceGateway.ajax.change_cart.nonce
+        );
+        configurator = new SingleProductConfig(
+            PayPalCommerceGateway,
+            updateCart,
+            renderer.showButtons.bind(renderer),
+            renderer.hideButtons.bind(renderer),
+            document.querySelector('form.cart'),
+            errorHandler
+        );
+    }
+    if (context === 'cart') {
+        configurator = defaultConfigurator;
+
+        jQuery( document.body ).on( 'updated_cart_totals updated_checkout', () => {
+            renderer.render(configurator.configuration())
+        });
+    }
+    if (! configurator) {
+        console.error('No context for button found.');
+        return;
+    }
+
+    renderer.render(configurator.configuration());
+}
 document.addEventListener(
     'DOMContentLoaded',
     () => {
+
         if (! typeof(PayPalCommerceGateway)) {
             console.error('PayPal button could not be configured.');
             return;
         }
-        const context = PayPalCommerceGateway.context;
-        const errorHandler = new ErrorHandler();
-        const defaultConfigurator = new CartConfig(
-            PayPalCommerceGateway,
-            errorHandler
-        );
-        // Configure mini cart buttons
-        if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
 
-            const renderer = new Renderer(
+        const script = document.createElement('script');
-                PayPalCommerceGateway.button.url,
+        script.setAttribute('src', PayPalCommerceGateway.button.url);
-                PayPalCommerceGateway.button.mini_cart_wrapper
+        script.addEventListener('load', (event) => {
-            );
+            bootstrap();
-            renderer.render(defaultConfigurator.configuration())
+        })
-        }
+        document.body.append(script);
-        jQuery( document.body ).on( 'wc_fragments_loaded wc_fragments_refreshed', () => {
-            if (! document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
-                return;
-            }
-            const renderer = new Renderer(
-                PayPalCommerceGateway.button.url,
-                PayPalCommerceGateway.button.mini_cart_wrapper
-            );
-            renderer.render(defaultConfigurator.configuration())
-        } );
 
-        // Configure context buttons
-        if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
-            return;
-        }
-        let configurator = null;
-        if (context === 'product') {
-            if (! document.querySelector('form.cart')) {
-                return;
-            }
-            const updateCart = new UpdateCart(
-                PayPalCommerceGateway.ajax.change_cart.endpoint,
-                PayPalCommerceGateway.ajax.change_cart.nonce
-            );
-            configurator = new SingleProductConfig(
-                PayPalCommerceGateway,
-                updateCart,
-                renderer.showButtons.bind(renderer),
-                renderer.hideButtons.bind(renderer),
-                document.querySelector('form.cart'),
-                errorHandler
-            );
-        }
-        if (context === 'cart') {
-            configurator = defaultConfigurator;
-        }
-        if (! configurator) {
-            console.error('No context for button found.');
-            return;
-        }
 
-        const renderer = new Renderer(
-            PayPalCommerceGateway.button.url,
-            PayPalCommerceGateway.button.wrapper
-        );
-        renderer.render(configurator.configuration());
     }
 );

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

@@ -1,29 +1,11 @@
 class Renderer {
 
-    constructor(url, wrapper)
+    constructor(wrapper)
     {
-        this.url = url;
         this.wrapper = wrapper;
     }
 
     render(buttonConfig)
-    {
-
-        const script = document.createElement('script');
-
-        if (typeof paypal !== 'object') {
-            script.setAttribute('src', this.url);
-            script.addEventListener('load', (event) => {
-                this.renderButtons(buttonConfig);
-            })
-            document.body.append(script);
-            return;
-        }
-
-        this.renderButtons(buttonConfig);
-    }
-
-    renderButtons(buttonConfig)
     {
 
         paypal.Buttons(