Flutter Stripe支付遇void类型错误，需获取相关API响应

问题描述 #

编写了Flutter Stripe支付代码，想要获取SetupPaymentSheetParameters和presentPaymentSheet的响应结果，但遇到错误提示："This expression has a type of 'void' so its value can't be used"，需要排查问题并获取对应API的响应。

原代码 #

Future<void> makePayment(data) async {
    print(data['clientSecret']);
  try {
      await Stripe.instance
          .initPaymentSheet(
              paymentSheetParameters: SetupPaymentSheetParameters(
            paymentIntentClientSecret: "${data['clientSecret']}",
            style: ThemeMode.dark,
          ))
          .then((value) {});

      ///now finally display payment sheeet
    displayPaymentSheet();
  } catch (e, s) {
    print('exception:$e$s');
  }
}

displayPaymentSheet() async {
  try {
    await Stripe.instance.presentPaymentSheet(
    ).then((value){
      showDialog(
          context: context,
          builder: (_) => AlertDialog(
            content: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Row(
                  children: const [
                    Icon(Icons.check_circle, color: Colors.green,),
                    Text("Payment Successfull"),
                  ],
                ),
              ],
            ),
          ));
      // ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("paid successfully")));
    }).onError((error, stackTrace){
      print('Error is:--->$error $stackTrace');
    });
  } on StripeException catch (e) {
    print('Error is:---> $e');
    showDialog(
        context: context,
        builder: (_) => const AlertDialog(
          content: Text("Cancelled "),
        ));
  } catch (e) {
    print('$e');
  }
}

错误截图 #

问题分析与解决方案 #

错误原因 #

1. 混用await与.then()：initPaymentSheet和presentPaymentSheet均返回Future<void>，无实际返回值。同时使用await和.then()时，.then()的回调参数value为void类型，无法被使用，这就是报错的根源。
2. 未等待异步函数完成：displayPaymentSheet是异步函数，原代码中调用时未加await，会导致支付流程不等待用户操作完成就继续执行。

修正后的代码 #

Future<void> makePayment(data) async {
  print(data['clientSecret']);
  try {
    // 直接await初始化支付表单，无需链式调用then
    await Stripe.instance.initPaymentSheet(
      paymentSheetParameters: SetupPaymentSheetParameters(
        paymentIntentClientSecret: "${data['clientSecret']}",
        style: ThemeMode.dark,
      ),
    );
    // 等待支付表单展示及用户操作完成
    await displayPaymentSheet();
  } catch (e, s) {
    print('初始化支付表单异常:$e$s');
  }
}

Future<void> displayPaymentSheet() async {
  try {
    // 展示支付表单，成功则执行支付成功逻辑
    await Stripe.instance.presentPaymentSheet();
    
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: const [
            Row(
              children: [
                Icon(Icons.check_circle, color: Colors.green),
                Text("支付成功"),
              ],
            ),
          ],
        ),
      ),
    );
  } on StripeException catch (e) {
    print('支付表单异常:---> $e');
    showDialog(
      context: context,
      builder: (_) => const AlertDialog(
        content: Text("已取消"),
      ),
    );
  } catch (e) {
    print('其他异常:$e');
  }
}

获取API响应的方式 #

Stripe的这两个API通过异常捕获来反馈结果：

• initPaymentSheet：成功执行即代表支付表单初始化完成；若失败（如clientSecret无效、配置错误），会抛出异常，可在catch块中捕获并处理。
• presentPaymentSheet：成功执行代表用户支付完成；若用户取消支付、支付失败等，会抛出StripeException，可通过捕获该异常区分不同错误场景。

内容的提问来源于stack exchange，提问作者Deepak