Initialize platform web pay button when added to DOM (#1978)

* Mimic payment element initialization *
flutter-stripe · Oct 28, 2024 · 80c0183 · 80c0183
1 parent 14ee042
commit 80c0183
Showing 1 changed file with 37 additions and 26 deletions.
diff --git a/packages/stripe_web/lib/src/widgets/platform_pay_button.dart b/packages/stripe_web/lib/src/widgets/platform_pay_button.dart
@@ -32,6 +32,36 @@ class WebPlatformPayButton extends StatefulWidget {
 }
 
 class _WebPlatformPayButtonState extends State<WebPlatformPayButton> {
+  final web.HTMLDivElement _divElement = web.HTMLDivElement()
+    ..id = 'platform-pay-button';
+
+  late final web.MutationObserver mutationObserver = web.MutationObserver(
+      ((JSArray<web.MutationRecord> entries, web.MutationObserver observer) {
+    if (web.document.getElementById('platform-pay-button') != null) {
+      mutationObserver.disconnect();
+
+      PaymentRequest paymentRequest = WebStripe.js
+          .paymentRequest((widget.paymentRequestCreateOptions).toJS());
+
+      paymentRequest.canMakePayment().then((value) {
+        WebStripe.js.elements().createPaymentRequestButton(
+            JsPaymentRequestButtonElementCreateOptions(
+                paymentRequest: paymentRequest.js,
+                style: JsPaymentRequestButtonElementStyle(
+                    paymentRequestButton: PaymentRequestButtonStyleOptions(
+                  theme: theme(Theme.of(context).brightness),
+                  type: type,
+                  height: '${constraints.maxHeight}px',
+                ))))
+          ..on('click', (event) {
+            event.toDart['preventDefault']();
+            widget.onPressed();
+          })
+          ..mount('#platform-pay-button'.toJS);
+      });
+    }
+  }.toJS));
+
   BoxConstraints get constraints =>
       widget.constraints ??
       const BoxConstraints.expand(height: kPlatformPayButtonDefaultHeight);
@@ -40,8 +70,13 @@ class _WebPlatformPayButtonState extends State<WebPlatformPayButton> {
   void initState() {
     // ignore: undefined_prefixed_name
     ui.platformViewRegistry.registerViewFactory('stripe_platform_pay_button',
-        (int viewId) => web.HTMLDivElement()..id = 'platform-pay-button');
-    _initButton();
+        (int viewId) => _divElement);
+
+    mutationObserver.observe(
+      web.document,
+      web.MutationObserverInit(childList: true, subtree: true),
+    );
+
     super.initState();
   }
 
@@ -58,30 +93,6 @@ class _WebPlatformPayButtonState extends State<WebPlatformPayButton> {
     );
   }
 
-  _initButton() {
-    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
-      PaymentRequest paymentRequest = WebStripe.js
-          .paymentRequest((widget.paymentRequestCreateOptions).toJS());
-
-      paymentRequest.canMakePayment().then((value) {
-        WebStripe.js.elements().createPaymentRequestButton(
-            JsPaymentRequestButtonElementCreateOptions(
-                paymentRequest: paymentRequest.js,
-                style: JsPaymentRequestButtonElementStyle(
-                    paymentRequestButton: PaymentRequestButtonStyleOptions(
-                  theme: theme(Theme.of(context).brightness),
-                  type: type,
-                  height: '${constraints.maxHeight}px',
-                ))))
-          ..on('click', (event) {
-            event.toDart['preventDefault']();
-            widget.onPressed();
-          })
-          ..mount('#platform-pay-button'.toJS);
-      });
-    });
-  }
-
   PaymentRequestButtonType get type {
     switch (widget.type) {
       case PlatformButtonType.buy: