feat: migrate js interop

Author: jamesblasco

example/.gitignore

@@ -33,7 +33,6 @@
 /build/
 
 # Web related
-lib/generated_plugin_registrant.dart
 
 # Symbolication related
 app.*.symbols

example/lib/screens/payment_sheet/payment_element/platforms/payment_element_web.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/widgets.dart';
 import 'package:flutter_stripe_web/flutter_stripe_web.dart';
+import 'package:web/web.dart' as web;
 
-import '../../../checkout/platforms/stripe_checkout_web.dart';
+String getUrlPort() => web.window.location.port;
+
+String getReturnUrl() => web.window.location.href;
 
 Future<void> pay() async {
   await WebStripe.instance.confirmPaymentElement(

example/pubspec.yaml

@@ -4,15 +4,14 @@ version: 1.0.0
 publish_to: 'none'
 
 environment:
-  sdk: ">=2.17.0 <4.0.0"
+  sdk: ">=3.3.0 <4.0.0"
   flutter: ">=3.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   flutter_stripe: ^9.4.0
   flutter_stripe_web: ^4.4.0
-  stripe_checkout: ^1.0.1
   pay: ^1.1.0
   http: ^1.1.0
   font_awesome_flutter: ^10.6.0

example/server/yarn.lock

@@ -1,10 +1,6 @@
 import 'package:freezed_annotation/freezed_annotation.dart';
 import 'package:stripe_js/stripe_api.dart';
 
-class ElementsConverter extends JSConverter<Elements> {
-  const ElementsConverter();
-}
-
 class JSConverter<T> implements JsonConverter<T, dynamic> {
   const JSConverter();
 
@@ -15,6 +11,10 @@ class JSConverter<T> implements JsonConverter<T, dynamic> {
   dynamic toJson(dynamic object) => object;
 }
 
+class ElementsConverter extends JSConverter<Elements> {
+  const ElementsConverter();
+}
+
 class ElementConverter extends JSConverter<Element> {
   const ElementConverter();
 }

packages/stripe_js/lib/src/api/converters/js_converter.dart

@@ -1,3 +1,3 @@
-abstract class Element {}
+extension type const Element._(Object o) implements Object {}
 
-abstract class Elements {}
+extension type const Elements._(Object o) implements Object {}

packages/stripe_js/lib/src/api/elements/element.dart

@@ -1,47 +1,28 @@
-import 'package:js/js.dart';
 import 'package:stripe_js/stripe_api.dart';
+import 'dart:js_interop';
+import '../utils/utils.dart';
 
 typedef EventCallback<T> = void Function(T event);
 
-@anonymous
-@JS()
-abstract class StripeElement implements Element {
+extension type const StripeElement(JSObject o) implements JSObject, Element {
   /// HTMLElement keeps giving this error for some reason:
   /// Cannot find name 'HTMLElement'
-  external void mount(dynamic domElement);
-  /*external void on('blur'|'change'|'focus'|'ready' event, handler handler);*/
-  /*external void on('click' event, void handler({ preventDefault: () => void } response));*/
+  external void mount(JSAny domElement);
 
-  /*external void addEventJsArrayener('blur'|'change'|'focus'|'ready' event, handler handler);*/
-  /*external void addEventJsArrayener('click' event, void handler({ preventDefault: () => void } response));*/
-  external void addEventJsArrayener(
-      String event, EventCallback<dynamic> handler);
   external void focus();
   external void blur();
   external void clear();
   external void unmount();
   external void destroy();
 
   @JS("on")
-  external void on(String event, EventCallback<dynamic> handler);
-}
-
-extension ElementExtension on StripeElement {
-  void onFocus(EventCallback<dynamic> onEvent) {
-    return on("focus", allowInterop((e) {
-      onEvent(e);
-    }));
-  }
+  external void _on(String event, JSExportedDartFunction handler);
 
-  void onReady(EventCallback<dynamic> onEvent) {
-    return on("ready", allowInterop((e) {
-      onEvent(e);
-    }));
+  void on(String event, EventCallback<JSMap> handler) {
+    return _on(event, handler.toJS);
   }
 
-  void onBlur(EventCallback<dynamic> onEvent) {
-    return on("blur", allowInterop((e) {
-      onEvent(e);
-    }));
-  }
+  void onFocus(EventCallback<void> onEvent) => on("focus", onEvent);
+  void onReady(EventCallback<void> onEvent) => on("ready", onEvent);
+  void onBlur(EventCallback<void> onEvent) => on("blur", onEvent);
 }

packages/stripe_js/lib/src/js/core/core.dart

@@ -1,20 +1,11 @@
-import 'package:js/js.dart';
+import 'dart:js_interop';
+
 import 'package:stripe_js/stripe_api.dart';
 import 'package:stripe_js/stripe_js.dart';
 
-@anonymous
-@JS()
-abstract class CardPaymentElement extends StripeElement {}
-
-@anonymous
-@JS()
-abstract class _JS {
-  external void update(dynamic options);
-  external void on(String event, EventCallback<dynamic> handler);
-}
-
-extension CardPaymentExtension on CardPaymentElement {
-  _JS get js => this as _JS;
+extension type CardPaymentElement(StripeElement o) implements StripeElement {
+  @JS('update')
+  external void _update(JSAny? options);
 
   /// Updates the options the Element was initialized with.
   /// Updates are merged into the existing configuration.
@@ -27,20 +18,19 @@ extension CardPaymentExtension on CardPaymentElement {
   /// This method can be used to simulate CSS media queries that automatically
   /// adjust the size of elements when viewed on different devices.
   void update(CardElementOptions options) {
-    return js.update(jsify(options.toJson()));
+    return _update(options.toJson().jsify());
   }
 
   void onChange(EventCallback<CardElementChangeEvent> onEvent) {
-    return on("change", allowInterop((e) {
-      final value = dartify(e) as Map<dynamic, dynamic>;
-      final json = value.cast<String, dynamic>();
-      onEvent(CardElementChangeEvent.fromJson(json));
-    }));
+    return on("change", (event) {
+      onEvent(CardElementChangeEvent.fromJson(event.toDart));
+    });
   }
 }
 
 extension ElementsExtension on StripeElements {
   CardPaymentElement createCard([CardElementOptions? options]) {
-    return create('card', jsify(options?.toJson() ?? {})) as CardPaymentElement;
+    return create('card', (options?.toJson() ?? {}).jsify())
+        as CardPaymentElement;
   }
 }