feat: migrate js interop

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

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

@@ -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/elements/element.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/js/elements/element_base.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/elements/element_card.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;
   }
 }

packages/stripe_js/lib/src/js/elements/element_creation_options.dart

@@ -1,39 +1,47 @@
 // Module elements
-import 'dart:js';
 
-import 'package:js/js.dart';
 import 'package:stripe_js/stripe_js.dart';
+import 'dart:js_interop';
 
-@anonymous
-@JS()
-abstract class JsElementsCreateOptions {
-  @JS("ElementsCreateOptions")
+extension type JsElementsCreateOptions._(JSObject o) {
   external factory JsElementsCreateOptions({
-    JsArray<Font>? fonts,
+    JSArray<Font>? fonts,
     String? locale,
     String? clientSecret,
     JsElementAppearance? appearance,
-    String loader = "auto",
+    String loader,
   });
 
-  external JsArray<Font> fonts;
+  external JSArray<Font> fonts;
   external String locale;
   external String clientSecret;
   external JsElementAppearance appearance;
 }
 
-@anonymous
-@JS()
-class JsElementAppearance {
-  external String? theme;
-  external Map<String, String>? variables;
-  external Map<String, Map<String, String>>? rules;
-  external String? labels;
-  @JS("ElementAppearance")
-  external factory JsElementAppearance({
+extension type JsElementAppearance._(JSObject o) {
+  factory JsElementAppearance({
     String? theme,
     Map<String, String>? variables,
     Map<String, Map<String, String>>? rules,
     String? labels,
+  }) {
+    return JsElementAppearance.__(
+      theme: theme,
+      variables: variables.jsify(),
+      rules: rules.jsify(),
+      labels: labels,
+    );
+  }
+
+  external JsElementAppearance.__({
+    String? theme,
+    JSAny? variables,
+    JSAny? rules,
+    String? labels,
   });
+
+  external String? theme;
+  external JSAny? variables;
+  external JSAny? rules;
+  external String? labels;
 }

packages/stripe_js/lib/src/js/elements/element_payment.dart

@@ -1,41 +1,36 @@
-import 'package:js/js.dart';
+import 'dart:js_interop';
+
 import 'package:stripe_js/stripe_api.dart';
 import 'package:stripe_js/stripe_js.dart';
 
 extension ElementsPaymentExtension on StripeElements {
   /// This method creates an instance of the Payment Element.
   /// [options] : Options for creating the Payment Element.
   PaymentElement createPayment([PaymentElementOptions? options]) {
-    return create('payment', jsify(options?.toJson() ?? {})) as PaymentElement;
+    return create('payment', (options?.toJson() ?? {}).jsify())
+        as PaymentElement;
   }
 
   PaymentElement? getPayment([PaymentElementOptions? options]) {
     return getElement('payment') as PaymentElement;
   }
 }
 
-@anonymous
-@JS()
-abstract class PaymentElement extends StripeElement {
+extension type PaymentElement(StripeElement o) implements StripeElement {
   /// Updates the options the Payment Element was initialized with.
   /// Updates are merged into the existing configuration.
+  @JS('update')
+  external void _update([JSAny? options]);
 
-  external void update([dynamic options]);
-
-  external void collapse();
-}
-
-extension ExtendedPaymentElement on PaymentElement {
-  PaymentElement get js => this;
   void update([PaymentElementOptions? options]) {
-    return update(jsify(options?.toJson() ?? {}));
+    return _update((options?.toJson() ?? {}).jsify());
   }
 
+  external void collapse();
+
   void onChange(EventCallback<PaymentElementChangeEvent> onEvent) {
-    return on("change", allowInterop((e) {
-      final value = dartify(e) as Map<dynamic, dynamic>;
-      final json = value.cast<String, dynamic>();
-      onEvent(PaymentElementChangeEvent.fromJson(json));
-    }));
+    return on("change", (event) {
+      onEvent(PaymentElementChangeEvent.fromJson(event.toDart));
+    });
   }
 }

packages/stripe_js/lib/src/js/elements/element_payment_request_button.dart

@@ -1,10 +1,8 @@
-import 'package:js/js.dart';
+import 'dart:js_interop';
 import 'package:stripe_js/stripe_js.dart';
 
-@anonymous
-@JS()
-abstract class JsPaymentRequestButtonElementCreateOptions {
-  @JS("PaymentRequestButtonElementCreateOptions")
+extension type JsPaymentRequestButtonElementCreateOptions._(JSObject o)
+    implements JSObject {
   external factory JsPaymentRequestButtonElementCreateOptions({
     JsPaymentRequest? paymentRequest,
     JsPaymentRequestButtonElementStyle? style,
@@ -13,47 +11,22 @@ abstract class JsPaymentRequestButtonElementCreateOptions {
   external JsPaymentRequest paymentRequest;
 }
 
-@anonymous
-@JS()
-abstract class JsPaymentRequestButtonElementStyle {
-  @JS("PaymentRequestButtonElementStyle")
+extension type JsPaymentRequestButtonElementStyle._(JSObject o)
+    implements JSObject {
   external factory JsPaymentRequestButtonElementStyle({
-    JsPaymentRequestButtonElementStyleProps? paymentRequestButton,
+    PaymentRequestButtonStyleOptions? paymentRequestButton,
   });
 
-  external JsPaymentRequestButtonElementStyleProps? paymentRequestButton;
+  external PaymentRequestButtonStyleOptions? paymentRequestButton;
 }
 
-@anonymous
-@JS()
-abstract class JsPaymentRequestButtonElementStyleProps {
-  @JS("PaymentRequestButtonElementStyleProps")
-  external factory JsPaymentRequestButtonElementStyleProps({
-    String? theme,
-    String? type,
-    String? height,
-  });
-
-  /// One of 'dark', 'light', or 'light-outline'
-  /// Defaults to 'dark'
-  external String? theme;
-
-  /// One of 'default', 'book', 'buy', or 'donate'
-  /// Defaults to 'default'
-  external String? type;
-
-  /// Defaults to '40px'. The width is always '100%'.
-  external String? height;
-}
-
-@anonymous
-@JS()
-abstract class PaymentRequestButtonElement extends StripeElement {}
+extension type PaymentRequestButtonElement(StripeElement o)
+    implements StripeElement {}
 
 extension ElementsPaymentRequestExtension on StripeElements {
   PaymentRequestButtonElement createPaymentRequestButton(
       JsPaymentRequestButtonElementCreateOptions options) {
-    return create('paymentRequestButton', options)
+    return create('paymentRequestButton', options.jsify())
         as PaymentRequestButtonElement;
   }
 }