flutterstripe-paymentsflutter-webflutter-stripe

Flutter Stripe CardField not working in web


I am trying to get a CardField from the flutter_stripe package to appear on web. Simply with this code, a card field will display on ios and android. Though once I run on the app on Chrome, a blank line appears with the error, "Bad state: Source maps are not done loading". I have the flutter_stripe and flutter_stripe_web package both installed and I cannot seem to figure this out. Any advice would be appreciated!

import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';

void main() {
   runApp(const MyApp());
}

class MyApp extends StatefulWidget {
   const MyApp({super.key});

   @override
   MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
     CardFieldInputDetails? _card;
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Test',
         home: Scaffold(
           body: Column(
             children: [
               CardField(
                 cursorColor: Colors.black,
                 enablePostalCode: true,
                 countryCode: 'US',
                 postalCodeHintText: 'Enter the us postal code',
                 onCardChanged: (card) {
                   setState(() {
                     _card = card;
                   });
                 },
               ),
             ],
           ),
         ),
       );
     }
   }

ios image web image


Solution

  • Turns out I just needed to include Stripe.publishableKey = 'your publishable key' inside main()!