fix platformPayCreatePaymentMethod error (#1882)

Co-authored-by: Eduard Dumitrescu <[email protected]>

example/lib/screens/screens.dart

@@ -20,6 +20,7 @@ import 'package:stripe_example/screens/wallets/apple_pay_screen.dart';
 import 'package:stripe_example/screens/wallets/apple_pay_screen_plugin.dart';
 import 'package:stripe_example/screens/wallets/google_pay_screen.dart';
 import 'package:stripe_example/screens/wallets/google_pay_stripe_screen.dart';
+import 'package:stripe_example/screens/wallets/mobile_pay_create_payment_method_screen.dart';
 import 'package:stripe_example/screens/wallets/open_apple_pay_setup_screen.dart';
 import 'package:stripe_example/widgets/platform_icons.dart';
 
@@ -226,6 +227,11 @@ class Example extends StatelessWidget {
           builder: (c) => GooglePayScreen(),
           platformsSupported: [DevicePlatform.android],
         ),
+        Example(
+          title: 'Google/Apple Pay - Create payment method',
+          builder: (c) => MobilePayCreatePaymentMethodScreen(),
+          platformsSupported: [DevicePlatform.web],
+        ),
       ],
     ),
     ExampleSection(title: 'Regional Payment Methods', children: [

example/lib/screens/wallets/mobile_pay_create_payment_method_screen.dart

@@ -0,0 +1,84 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_stripe/flutter_stripe.dart';
+import 'package:stripe_example/widgets/example_scaffold.dart';
+import 'package:stripe_example/widgets/response_card.dart';
+
+class MobilePayCreatePaymentMethodScreen extends StatefulWidget {
+  const MobilePayCreatePaymentMethodScreen({super.key});
+
+  @override
+  State<MobilePayCreatePaymentMethodScreen> createState() =>
+      _MobilePayCreatePaymentMethodScreenState();
+}
+
+class _MobilePayCreatePaymentMethodScreenState
+    extends State<MobilePayCreatePaymentMethodScreen> {
+  PlatformPayPaymentMethod? response;
+
+  @override
+  void initState() {
+    Stripe.instance.isPlatformPaySupportedListenable.addListener(update);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    Stripe.instance.isPlatformPaySupportedListenable.removeListener(update);
+    super.dispose();
+  }
+
+  void update() {
+    setState(() {});
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ExampleScaffold(
+      title: 'Google/Apple Pay',
+      tags: ['Web'],
+      padding: EdgeInsets.all(16),
+      children: [
+        if (Stripe.instance.isPlatformPaySupportedListenable.value)
+          SizedBox(
+            height: 77,
+            width: 30,
+            child: PlatformPayButton(
+              type: PlatformButtonType.googlePayMark,
+              onPressed: _handlePayPress,
+            ),
+          )
+        else
+          Text('Google/Apple Pay is not available in this device'),
+        SizedBox(
+          height: 50,
+        ),
+        ResponseCard(response: response?.toString() ?? ''),
+      ],
+    );
+  }
+
+  Future<void> _handlePayPress() async {
+    // 1. create payment method
+
+    final paymentMethod = await Stripe.instance.createPlatformPayPaymentMethod(
+      params: PlatformPayPaymentMethodParams.web(
+        options: PlatformPayWebPaymentRequestCreateOptions(
+          country: 'DE',
+          currency: 'eur',
+          total: PlatformPayWebPaymentItem(
+            amount: 1521,
+            label: '',
+          ),
+        ),
+      ),
+    );
+
+    setState(() {
+      response = paymentMethod;
+    });
+
+    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
+        content: Text(
+            'Success!: The payment method with id: ${paymentMethod.paymentMethod.id} was created successfully,')));
+  }
+}

packages/stripe_js/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.1.1
+
+- **FIX**: The platformPayCreatePaymentMethod method results in an error on web (#1879).
+
 ## 6.1.0
 - Sync with Stripe [0.38.6](https://github.com/stripe/stripe-react-native/releases/tag/v0.38.6). 
 - Minor fixes and improvements.

packages/stripe_js/lib/src/js/payment_requests/payment_request.dart

@@ -1,7 +1,8 @@
+import 'dart:js_interop';
+
 import 'package:stripe_js/src/js/utils/parse_intent_response.dart';
 import 'package:stripe_js/stripe_api.dart';
 import 'package:stripe_js/stripe_js.dart';
-import 'dart:js_interop';
 
 extension PaymentRequestExtension on Stripe {
   _JS get _js => this as _JS;
@@ -47,7 +48,7 @@ class PaymentResponse {
   PaymentMethod get paymentMethod =>
       PaymentMethod.fromJson(_js.paymentMethod.toDart);
   String get walletName => _js.walletName;
-  Function(String complete) get complete => _js.complete;
+  void complete(final String complete) => _js.complete(complete);
 }
 
 extension type _JS._(JSObject o) {
@@ -60,10 +61,8 @@ extension type JsPaymentResponse._(JSObject o) {
   external JSMap get paymentMethod;
   external String get walletName;
   @JS('complete')
-  external JSFunction get _complete;
-  void Function(String) get complete {
-    return _complete.dartify() as void Function(String);
-  }
+  external void _complete(final String complete);
+  void complete(final String complete) => _complete(complete);
 }
 
 extension type JsPaymentRequest._(JSObject o) {

packages/stripe_js/pubspec.yaml

@@ -1,6 +1,6 @@
 name: stripe_js
 description: Stripe.js bindings for dart. This package is used by Stripe web so that the Stripe js sdk can be invoked directly.
-version: 6.1.0
+version: 6.1.1
 homepage: https://github.com/flutter-stripe/flutter_stripe
 
 environment:

packages/stripe_web/pubspec.yaml

@@ -14,7 +14,7 @@ dependencies:
     sdk: flutter
   freezed_annotation: ^2.0.3
   stripe_platform_interface: ^11.1.1
-  stripe_js: ^6.1.0
+  stripe_js: ^6.1.1
   web: ^1.0.0
 
 dev_dependencies: