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;
});
},
),
],
),
),
);
}
}
Turns out I just needed to include Stripe.publishableKey = 'your publishable key' inside main()!