Express checkout web (#1936)

* feat add  express checkout

* fix rendering express checkout

* feat: add onconfirm handler

---------

Co-authored-by: Remon <[email protected]>
Co-authored-by: Remon Helmond <[email protected]>

example/lib/screens/payment_sheet/express_checkout/express_checkout_element.dart

@@ -0,0 +1,80 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:http/http.dart' as http;
+import 'package:stripe_example/config.dart';
+import 'package:stripe_example/widgets/loading_button.dart';
+
+import 'platforms/express_checkout_element.dart'
+    if (dart.library.js) 'platforms/express_checkout_element_web.dart';
+
+class ExpressCheckoutElementExample extends StatefulWidget {
+  @override
+  _ThemeCardExampleState createState() => _ThemeCardExampleState();
+}
+
+class _ThemeCardExampleState extends State<ExpressCheckoutElementExample> {
+  String? clientSecret;
+
+  @override
+  void initState() {
+    super.initState();
+    getClientSecret();
+  }
+
+  Future<void> getClientSecret() async {
+    try {
+      final client = await createPaymentIntent();
+      setState(() {
+        clientSecret = client;
+      });
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(
+            e.toString(),
+          ),
+        ),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Flutter App'),
+      ),
+      body: Center(
+        child: Container(
+          constraints: BoxConstraints(maxWidth: 600),
+          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 52),
+          child: Column(
+            children: [
+              SizedBox(
+                  child: clientSecret != null
+                      ? ExpressCheckoutWidget(clientSecret)
+                      : Center(child: CircularProgressIndicator())),
+              LoadingButton(onPressed: pay, text: 'Pay'),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Future<String> createPaymentIntent() async {
+    final url = Uri.parse('$kApiUrl/create-payment-intent');
+    final response = await http.post(
+      url,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: json.encode({
+        'currency': 'usd',
+        'amount': 5099,
+      }),
+    );
+    return json.decode(response.body)['clientSecret'];
+  }
+}

example/lib/screens/payment_sheet/express_checkout/platforms/express_checkout_element.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_stripe_web/flutter_stripe_web.dart';
+import 'package:stripe_example/screens/payment_sheet/express_checkout/platforms/express_checkout_element_web.dart';
+
+Future<void> pay() async {
+  await WebStripe.instance.confirmPaymentElement(
+    ConfirmPaymentElementOptions(
+      confirmParams: ConfirmPaymentParams(return_url: getReturnUrl()),
+    ),
+  );
+}
+
+class ExpressCheckoutWidget extends StatelessWidget {
+  const ExpressCheckoutWidget(this.clientSecret);
+
+  final String? clientSecret;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container();
+  }
+}

example/lib/screens/payment_sheet/express_checkout/platforms/express_checkout_element_web.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_stripe_web/flutter_stripe_web.dart';
+import 'package:web/web.dart' as web;
+
+String getUrlPort() => web.window.location.port;
+
+String getReturnUrl() => web.window.location.href;
+
+Future<void> pay() async {
+  await WebStripe.instance.confirmPaymentElement(
+    ConfirmPaymentElementOptions(
+      confirmParams: ConfirmPaymentParams(return_url: getReturnUrl()),
+    ),
+  );
+}
+
+class ExpressCheckoutWidget extends StatelessWidget {
+  const ExpressCheckoutWidget(this.clientSecret);
+
+  final String? clientSecret;
+
+  @override
+  Widget build(BuildContext context) {
+    return ExpressCheckoutElement(
+      onConfirm: (value) {
+        pay();
+      },
+      clientSecret: clientSecret ?? '',
+    );
+  }
+}

example/lib/screens/regional_payment_methods/affirm_screen.dart

@@ -24,7 +24,6 @@ class AffirmScreen extends StatelessWidget {
       }),
     );
 
-    print('blaat ${json.decode(response.body)}');
     return json.decode(response.body);
   }
 

example/lib/screens/screens.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:stripe_example/screens/customer_sheet/customer_sheet_screen.dart';
 import 'package:stripe_example/screens/others/can_add_to_wallet_screen.dart';
+import 'package:stripe_example/screens/payment_sheet/express_checkout/express_checkout_element.dart';
 import 'package:stripe_example/screens/payment_sheet/payment_element/payment_element.dart';
 import 'package:stripe_example/screens/payment_sheet/payment_sheet_deffered_screen.dart';
 import 'package:stripe_example/screens/payment_sheet/payment_sheet_screen.dart';
@@ -123,6 +124,13 @@ class Example extends StatelessWidget {
             DevicePlatform.web,
           ],
         ),
+        Example(
+          title: 'ExpressCheckout',
+          builder: (c) => ExpressCheckoutElementExample(),
+          platformsSupported: [
+            DevicePlatform.web,
+          ],
+        ),
       ],
       expanded: true,
     ),

example/web/.well-known/apple-developer-merchantid-domain-association

@@ -0,0 +1 @@
+add here your apple dev association file