Flutter web Stripe 错误:WebUnsupportedError:Web 不支持 initPaymentSheet

问题描述 投票:0回答:3

我正在尝试在我的应用程序中实现 Stripe,但确实收到此错误。

  1. 我收到的错误是 Error: WebUnsupportedError:

网络不支持 initPaymentSheet 我不知道如何使其在网络上工作。

    WidgetsFlutterBinding.ensureInitialized();
    Get.put(MenuController());
    Get.put(NavigationController());
    await initialization;
    Stripe.publishableKey =
        'pk_test_5555851KuZKPKYrgcm5L1......';
    Stripe.merchantIdentifier = 'merchant.flutter.stripe.test';
    Stripe.urlScheme = 'flutterstripe';
    await Stripe.instance.applySettings();
    
    runApp((MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => ApplicationState(),
          builder: (context, _) => MyApp(),
        )
      ],
      // child: MyApp(),
    )));
    }
    Future<void> makePayment(String amount, String currency) async {
      try {
        paymentIntentData = await createPaymentIntent(amount, currency);
        await Stripe.instance.initPaymentSheet(
            paymentSheetParameters: SetupPaymentSheetParameters(
                paymentIntentClientSecret: paymentIntentData!['client_secret'],
                applePay: true,
                googlePay: true,
                merchantCountryCode: 'US',
                merchantDisplayName: 'KasaiMart'));
        displayPaymentSheet();
      } on StripeException catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
    
    displayPaymentSheet() async {
      try {
        await Stripe.instance.presentPaymentSheet();
        paymentIntentData = null;
        Get.defaultDialog(
            title: 'Select project to contribute to',
            middleText: 'Paid Sucessfully');
      } catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
    
    createPaymentIntent(String amount, String currency) async {
      try {
        Map<String, dynamic> body = {
          'amount': calculateAmount(amount),
          'currency': currency,
          'payment_method_types[]': 'card'
        };
        var response = await http.post(
            Uri.parse('https://api.stripe.com/v1/payment_intents'),
            body: body,
            headers: {
              'Authorization':
                  'pk_test_51K......',
              'Content-Type': 'application/x-www-form-urlencoded'
            });
        return jsonDecode(response.body.toString());
      } catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
  1. 我很难显示 initPaymentSheet?

我在哪种方法中做错了什么?是否可以解决此问题,或者是否来自软件包本身?

flutter web stripe-payments
3个回答
0
投票

Stripe for Web 仍处于高度实验阶段。 来自 Github 上的自述文件注意,现在它处于高度实验阶段,仅实现了一部分功能。

您还可以在 stripe_web 插件存储库中检查

initPaymentSheet
尚未实现。它立即抛出一个
WebUnsupportedError
。另外,请检查同一位置的其他不支持的方法。


0
投票

使用 stripe 中的信用卡字段

        Stripe.buildWebCard(
            controller: controller,
            onCardChanged: (details) {
              card = details;
              setState(() {
                allowPayment = details?.complete == true;
              });
            },
          ),
    

这是一个完整的示例:

import 'package:easy_localization/easy_localization.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter_stripe/flutter_stripe.dart';
import 'package:openfair/app/of_location.dart';
import 'package:openfair/ui/widgets/buttons.dart';

Future<bool?> showPaymentSheet({
  required BuildContext context,
  required Map<String, dynamic> paymentSheetData,
}) async {
  if (OFLocation.isWebMobile) {
    return showModalBottomSheet<bool?>(
        context: context,
        builder: (context) {
          return PaymentSheetWidget(paymentSheetData: paymentSheetData);
        });
  }
  return showDialog<bool?>(
      context: context,
      builder: (context) {
        final size = MediaQuery.of(context).size;
        return Dialog(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            insetPadding: EdgeInsets.symmetric(
                horizontal: size.width * 0.1, vertical: size.height * 0.1),
            child: PaymentSheetWidget(paymentSheetData: paymentSheetData));
      });
}

class PaymentSheetWidget extends StatefulWidget {
  final Map<String, dynamic> paymentSheetData;
  const PaymentSheetWidget({super.key, required this.paymentSheetData});

  @override
  State<PaymentSheetWidget> createState() => _PaymentSheetWidgetState();
}

class _PaymentSheetWidgetState extends State<PaymentSheetWidget> {
  CardFieldInputDetails? card;

  bool loading = false;

  bool allowPayment = false;

  final CardEditController controller = CardEditController();

  @override
  Widget build(BuildContext context) {
    final keyboardPadding = MediaQuery.of(context).viewInsets.bottom;
    return Padding(
      padding: const EdgeInsets.all(16)
          .add(EdgeInsets.only(bottom: keyboardPadding)),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Stripe.buildWebCard(
            controller: controller,
            onCardChanged: (details) {
              card = details;
              setState(() {
                allowPayment = details?.complete == true;
              });
            },
          ),
          Padding(
            padding: const EdgeInsets.only(top: 15),
            child: AnimatedOpacity(
              duration: Duration(milliseconds: 300),
              opacity: allowPayment ? 1 : 0.7,
              child: PrimaryButton(
                "pay".tr(),
                onPressed: () async {
                  if (!allowPayment) {
                    return;
                  }
                  setState(() {
                    loading = true;
                  });
                  await Stripe.instance
                      .confirmPayment(
                          options: PaymentMethodOptions(
                            setupFutureUsage:
                                PaymentIntentsFutureUsage.OffSession,
                          ),
                          paymentIntentClientSecret:
                              widget.paymentSheetData['client_secret'],
                          data: PaymentMethodParams.card(
                              paymentMethodData: PaymentMethodData(
                                  billingDetails: BillingDetails(
                            email: FirebaseAuth.instance.currentUser!.email,
                          ))))
                      .onError((error, stackTrace) {
                    print(error);
                    print(stackTrace);

                    throw Exception("Failed to confirm payment");
                  });
                  Navigator.of(context).pop(true);
                },
                isLoading: loading,
              ),
            ),
          )
        ],
      ),
    );
  }
}

stripe 会自行从卡输入中获取信用卡信息


-1
投票

initPaymentSheet
无法在网络上使用。 Stripe 的 React Native SDK 是 iOS/Android 独有的。

如果您想通过网络呈现类似于付款表的内容,您可以考虑使用付款元素:https://stripe.com/docs/ payments/ payment-element

© www.soinside.com 2019 - 2024. All rights reserved.