Flutter Stripe CardField在Web上无法正常工作

Question

我正在尝试从flutter_stripe包中获取CardField以在Web上显示。仅使用此代码，卡片字段将显示在iOS和Android上。但是一旦在Chrome上运行应用程序，就会出现一个带有错误“Bad state: Source maps are not done loading”的空白行。 我已经安装了flutter_stripe和flutter_stripe_web包，但似乎无法解决这个问题。欢迎提供任何建议！

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

- Deja

---

你的代码在 Flutter Web 上运行正常吗？ - ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Answer 1

原来我只需要在main()中包含Stripe.publishableKey = '你的可发布密钥'！

- Deja

---

很高兴你解决了！考虑到修复，这是一个令人惊讶的错误！ - Justin Michael

Answer 2

flutter_stripe项目目前仅对Web提供有限的实验性支持。 维护者建议您改用Stripe Checkout。

如果您真的想在Web上使用CardField，我建议您向flutter_stripe存储库发布问题，但是看起来您已经这样做了。

- Justin Michael

---

是的，我将它作为一个问题添加了，因为在他们的示例代码中，CardField 可以在 iOS、Android 和 Web 上工作。但我无法让它在我的代码中工作。 - Deja