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

CodePudding user response：

The flutter_stripe project only has limited, experimental support for the web right now. The maintainers recommend you use Stripe Checkout instead.

If you really want to get the CardField working on the web I was going to suggest you post an issue to the flutter_stripe repo, but it looks like you've already done so.

CodePudding user response：

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