From a2e24ff740f86c49d7eedf6e53ffa08d3df6c667 Mon Sep 17 00:00:00 2001
From: cedvandenbosch <cedvandenbosch@tyxio.com>
Date: Thu, 7 Nov 2024 15:18:12 +0100
Subject: [PATCH] fix web example

---
 .../_create_setup_intent.dart                 |  2 +-
 .../add_payment_method_screen_loader_web.dart | 23 +++++++++++--------
 example/server/src/index.ts                   |  8 +++----
 3 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/example/lib/screens/setup_future_payments/_create_setup_intent.dart b/example/lib/screens/setup_future_payments/_create_setup_intent.dart
index 310f295b..5f005eb0 100644
--- a/example/lib/screens/setup_future_payments/_create_setup_intent.dart
+++ b/example/lib/screens/setup_future_payments/_create_setup_intent.dart
@@ -16,7 +16,7 @@ Future<SetupKeys> createSetupIntent() async {
       'Content-Type': 'application/json',
     },
     body: json.encode({
-      'payment_method_types': ['cards', 'sepa_debit'],
+      'payment_method_types': ['card', 'sepa_debit'],
     }),
   );
   final body = json.decode(response.body);
diff --git a/example/lib/screens/setup_future_payments/add_payment_method_screen_loader_web.dart b/example/lib/screens/setup_future_payments/add_payment_method_screen_loader_web.dart
index 513ceb66..9c926b78 100644
--- a/example/lib/screens/setup_future_payments/add_payment_method_screen_loader_web.dart
+++ b/example/lib/screens/setup_future_payments/add_payment_method_screen_loader_web.dart
@@ -4,7 +4,7 @@ import 'package:flutter_stripe_web/flutter_stripe_web.dart';
 import '_create_setup_intent.dart';
 
 extension ToHex on Color {
-  String toRgb() => 'rgb($r, $g, $b)';
+  String toRgb() => 'rgb($red, $green, $blue)';
 }
 
 class AddPaymentMethodScreenLoader {
@@ -64,13 +64,16 @@ class _AddPaymentMethodScreenPlatformState
       ),
       body: Column(
         children: [
-          PaymentElement(
-            clientSecret: widget.setupKeys.clientSecret,
-            onCardChanged: (c) {
-              setState(() => isComplete = c?.complete ?? false);
-            },
-            layout: PaymentElementLayout.tabs,
-            appearance: buildAppearance(context),
+          Padding(
+            padding: const EdgeInsets.all(24),
+            child: PaymentElement(
+              clientSecret: widget.setupKeys.clientSecret,
+              onCardChanged: (c) {
+                setState(() => isComplete = c?.complete ?? false);
+              },
+              layout: PaymentElementLayout.tabs,
+              appearance: buildAppearance(context),
+            ),
           ),
           const SizedBox(height: 8),
           ElevatedButton(
@@ -86,8 +89,10 @@ class _AddPaymentMethodScreenPlatformState
     final theme = Theme.of(context);
     final isDark = theme.brightness == Brightness.dark;
 
+    print(theme.colorScheme.surface.toRgb());
+
     return ElementAppearance(
-      theme: isDark ? ElementTheme.night : ElementTheme.none,
+      theme: isDark ? ElementTheme.night : ElementTheme.stripe,
       variables: {
         'fontFamily': 'roboto, system-ui, sans-serif',
         'colorBackground': theme.colorScheme.surface.toRgb(),
diff --git a/example/server/src/index.ts b/example/server/src/index.ts
index b12d3380..86e78295 100644
--- a/example/server/src/index.ts
+++ b/example/server/src/index.ts
@@ -369,11 +369,9 @@ app.post('/create-setup-intent', async (req, res) => {
 
   //@ts-ignore
   const setupIntent = await stripe.setupIntents.create({
-    ...{
-      customerId: customer.id,
-      payment_method_types,
-      usage: ['off_session'],
-    },
+    customer: customer.id,
+    payment_method_types,
+    usage: 'off_session',
     ...(payment_method_types?.includes('paypal') ? payPalIntentPayload : {}),
   });