From 96678582942e49cbd0876bded3a8f35da610ace1 Mon Sep 17 00:00:00 2001
From: Simon Herrmann <Simon.He3@gmail.com>
Date: Sat, 2 Mar 2024 10:59:27 +0100
Subject: [PATCH] clean up payment element, use flutter best practices, enable
 scrolling (#1620)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* clean up payment element, use flutter best practices, enable scrolling

* disable horizontal scroll

* readd comment with typo fix

---------

Co-authored-by: jonasbark <jonas.bark@gmx.de>
Co-authored-by: Rémon <remonhelmond@gmail.com>
---
 .../lib/src/widgets/payment_element.dart      | 101 +++++++++---------
 1 file changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/stripe_web/lib/src/widgets/payment_element.dart b/packages/stripe_web/lib/src/widgets/payment_element.dart
index a501b0300..4d9eb4c4d 100644
--- a/packages/stripe_web/lib/src/widgets/payment_element.dart
+++ b/packages/stripe_web/lib/src/widgets/payment_element.dart
@@ -1,64 +1,55 @@
 import 'dart:html';
-
-import 'dart:ui' as ui;
-
+import 'dart:ui_web' as ui;
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 
 import '../../flutter_stripe_web.dart';
-import 'package:stripe_js/stripe_js.dart' as js;
 import 'package:stripe_js/stripe_api.dart' as js;
+import 'package:stripe_js/stripe_js.dart' as js;
 
 export 'package:stripe_js/stripe_api.dart' show PaymentElementLayout;
 
 typedef PaymentElementTheme = js.ElementTheme;
 
 class PaymentElement extends StatefulWidget {
-  PaymentElement({
-    required this.onCardChanged,
-    Key? key,
-    this.onFocus,
-    this.style,
-    this.placeholder,
-    this.enablePostalCode = false,
-    double? width,
-    double? height = kCardFieldDefaultHeight,
-    BoxConstraints? constraints,
-    this.focusNode,
-    required this.clientSecret,
-    this.autofocus = false,
-    this.layout = PaymentElementLayout.accordion,
-    this.appearance,
-  })  : assert(constraints == null || constraints.debugAssertIsValid()),
-        constraints = (width != null || height != null)
-            ? constraints?.tighten(width: width, height: height) ??
-                BoxConstraints.tightFor(width: width, height: height)
-            : constraints,
-        super(key: key);
-
-  final BoxConstraints? constraints;
-  final CardFocusCallback? onFocus;
   final String clientSecret;
-  final CardChangedCallback onCardChanged;
+  final double? width;
+  final double? height;
   final CardStyle? style;
   final CardPlaceholder? placeholder;
   final bool enablePostalCode;
-  final FocusNode? focusNode;
   final bool autofocus;
+  final FocusNode? focusNode;
+  final CardFocusCallback? onFocus;
+  final CardChangedCallback onCardChanged;
   final PaymentElementLayout layout;
   final js.ElementAppearance? appearance;
+
+  PaymentElement({
+    super.key,
+    required this.clientSecret,
+    this.width,
+    this.height,
+    this.style,
+    this.placeholder,
+    this.enablePostalCode = false,
+    this.autofocus = false,
+    this.focusNode,
+    this.onFocus,
+    required this.onCardChanged,
+    this.layout = PaymentElementLayout.accordion,
+    this.appearance,
+  });
+
   @override
-  PaymentElementState createState() => PaymentElementState();
+  State<PaymentElement> createState() => PaymentElementState();
 }
 
 class PaymentElementState extends State<PaymentElement> {
-  // 2 is the first size generated by the iframe. O will not worrk
-  double height = 2;
-  late final DivElement _divElement = DivElement()
-    ..id = 'payment-element'
-    ..style.border = 'none'
-    ..style.width = '100%'
-    ..style.height = '$height';
+  DivElement _divElement = DivElement();
+  // 2 is the first size generated by the iframe, O will not work.
+  double height = 2.0;
+
   late MutationObserver? mutationObserver =
       MutationObserver((entries, observer) {
     if (document.getElementById('payment-element') != null) {
@@ -82,23 +73,33 @@ class PaymentElementState extends State<PaymentElement> {
   });
 
   late final resizeObserver = ResizeObserver((entries, observer) {
-    for (final entry in entries) {
-      if (entry.contentRect is DomRectReadOnly) {
-        final cr = entry.contentRect;
-        final height = cr.height;
-        setState(() {
-          this.height = height;
-          _divElement.style.height = '${height}px';
-        });
+    if (widget.height == null) {
+      for (final entry in entries) {
+        if (entry.contentRect is DomRectReadOnly) {
+          final cr = entry.contentRect;
+          setState(() {
+            height = cr.height;
+            _divElement.style.height = '${height}px';
+          });
+        }
       }
     }
   });
 
   @override
   void initState() {
+    height = widget.height ?? height;
+
+    _divElement = DivElement()
+      ..id = 'payment-element'
+      ..style.border = 'none'
+      ..style.width = '100%'
+      ..style.height = '${height}'
+      ..style.overflow = 'scroll'
+      ..style.overflowX = 'hidden';
+
     elements = WebStripe.js.elements(createOptions());
     mutationObserver!.observe(document, childList: true, subtree: true);
-    // ignore: undefined_prefixed_name
     ui.platformViewRegistry.registerViewFactory(
       'stripe_payment_element',
       (int viewId) => _divElement,
@@ -144,8 +145,10 @@ class PaymentElementState extends State<PaymentElement> {
             element?.blur(); */
       },
       child: ConstrainedBox(
-        constraints:
-            BoxConstraints(maxWidth: double.infinity, maxHeight: height),
+        constraints: BoxConstraints(
+          maxWidth: double.infinity,
+          maxHeight: height,
+        ),
         child: const HtmlElementView(viewType: 'stripe_payment_element'),
       ),
     );