fix web example

flutter-stripe · Nov 7, 2024 · a2e24ff · a2e24ff
1 parent a9650ef
commit a2e24ff
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -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 : {}),
   });