From 9c7859bf35de6cbd425b0fd2b511710cac86588d Mon Sep 17 00:00:00 2001
From: Alex P <alex.pantec@gmail.com>
Date: Thu, 11 Nov 2021 18:03:50 +0200
Subject: [PATCH] Use MutationObserver to detect order button visibility
 changes

Such as for the old PayPal plugin,
which shows it on click + with some animation,
or Conditional WooCommerce Checkout Field,
which shows the button after loading some data
---
 .../js/modules/ContextBootstrap/CheckoutBootstap.js      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
index d5df1460d..9519f9073 100644
--- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
+++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
@@ -10,6 +10,10 @@ class CheckoutBootstap {
         this.spinner = spinner;
 
         this.standardOrderButtonSelector = '#place_order';
+
+        this.buttonChangeObserver = new MutationObserver((el) => {
+            this.updateUi();
+        });
     }
 
     init() {
@@ -64,6 +68,11 @@ class CheckoutBootstap {
             this.gateway.hosted_fields.wrapper,
             actionHandler.configuration(),
         );
+
+        this.buttonChangeObserver.observe(
+            document.querySelector(this.standardOrderButtonSelector),
+            {attributes: true}
+        );
     }
 
     updateUi() {