如何使用flutter_stripe_web在Flutter Web中实现Stripe支付？

一、用 flutter_stripe 实现 Web 端支付 #

flutter_stripe 已官方支持 Web 端，无需单独引入 flutter_stripe_web 包，直接使用主包即可，具体步骤如下：

• 添加依赖：在 pubspec.yaml 中加入最新版本的依赖：

  dependencies:
    flutter_stripe: ^9.6.0 # 替换为当前最新版本
  

  执行 flutter pub get 完成安装。

• Web 端基础配置：在 web/index.html 的 <head> 标签内插入 Stripe JS 脚本：

  <script src="https://js.stripe.com/v3/"></script>
  

  然后在 Flutter 初始化阶段（比如 main 函数）配置 Stripe 公钥：

  import 'package:flutter_stripe/flutter_stripe.dart';
  import 'package:flutter/material.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    Stripe.publishableKey = 'pk_test_xxxxxx'; // 替换为你的 Stripe 公钥
    await Stripe.instance.applySettings();
    runApp(const MyApp());
  }
  

• 后端生成 PaymentIntent：前端不能直接生成支付意图，必须调用你的后端接口，由后端使用 Stripe 服务端 SDK 创建 PaymentIntent，并将返回的 clientSecret 传给前端。

• 触发支付流程：拿到 clientSecret 后，调用支付确认方法完成流程：

  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  Future<void> processPayment() async {
    try {
      // 调用后端获取 clientSecret
      final response = await http.post(
        Uri.parse('你的后端支付接口地址'),
        body: jsonEncode({'amount': '1000', 'currency': 'usd'}), // 金额单位为分
        headers: {'Content-Type': 'application/json'},
      );
      final data = jsonDecode(response.body);
      final clientSecret = data['clientSecret'];
  
      // 确认支付
      final result = await Stripe.instance.confirmPayment(
        clientSecret,
        const PaymentMethodParams.card(
          paymentMethodData: PaymentMethodData(
            billingDetails: BillingDetails(
              name: 'John Doe',
              email: 'john@example.com',
            ),
          ),
        ),
      );
  
      if (result.status == PaymentIntentsStatus.succeeded) {
        // 支付成功，执行后续业务逻辑
        print('支付完成');
      } else {
        // 支付失败，提示用户
        print('支付失败: ${result.error?.message}');
      }
    } catch (e) {
      print('支付异常: $e');
    }
  }
  

二、其他最优集成方案 #

如果 flutter_stripe 无法满足定制需求，以下两种方案也被广泛使用：

1. 直接调用 Stripe JS SDK（高度定制化） #

Flutter Web 可通过 dart:js 直接调用 Stripe 原生 JS SDK，适合需要完全自定义支付表单样式的场景：

• 同样先在 web/index.html 引入 Stripe JS 脚本，再用 Dart 包装 JS 调用：

  import 'dart:js' as js;
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  Future<void> customStripePayment() async {
    // 初始化 Stripe
    final stripe = js.JsObject(js.context['Stripe'], ['pk_test_xxxxxx']);
    // 创建卡片输入元素
    final elements = stripe.callMethod('elements');
    final cardElement = elements.callMethod('create', ['card']);
    // 将卡片元素挂载到页面 DOM 节点（需提前在 web/index.html 中添加 id 为 card-element 的 div）
    cardElement.callMethod('mount', ['#card-element']);
  
    // 调用后端获取 clientSecret
    final response = await http.post(Uri.parse('你的后端接口'));
    final clientSecret = jsonDecode(response.body)['clientSecret'];
  
    // 确认支付
    final paymentResult = await stripe.callMethod('confirmCardPayment', [
      clientSecret,
      js.JsObject.jsify({
        'payment_method': {
          'card': cardElement,
          'billing_details': {'name': 'John Doe'}
        }
      })
    ]);
  
    if (paymentResult['error'] == null) {
      print('支付成功');
    } else {
      print('支付失败: ${paymentResult['error']['message']}');
    }
  }
  

2. Stripe Checkout（快速上线首选） #

如果追求最快集成速度，Stripe Checkout 预构建的支付页面是最优选择，无需自行开发支付表单：

• 后端使用 Stripe 服务端 SDK 创建 Checkout Session，将返回的 sessionId 传给前端
• 前端调用 JS 方法跳转到 Stripe 官方支付页面：

  import 'dart:js' as js;
  
  void redirectToStripeCheckout(String sessionId) {
    final stripe = js.JsObject(js.context['Stripe'], ['pk_test_xxxxxx']);
    stripe.callMethod('redirectToCheckout', [
      js.JsObject.jsify({'sessionId': sessionId})
    ]);
  }
  

用户支付完成后，Stripe 会自动跳转至你配置的成功/失败页面，同时后端会收到 Stripe 的 webhook 通知，用于最终确认支付状态。

三、关键注意事项 #

• 敏感操作必须放在后端：创建 PaymentIntent、Checkout Session 等操作绝对不能在前端执行，必须由后端使用 Stripe 私钥处理，防止金额篡改和密钥泄露。
• 测试用专用卡片：开发阶段使用 Stripe 提供的测试卡片（如 4242 4242 4242 4242，任意到期日和 CVC）验证流程，禁止使用真实卡片。
• 最终状态以后端查询为准：前端回调仅作初步提示，最终支付状态必须通过后端查询 Stripe API 确认，避免前端恶意篡改状态。

附上你提供的相关界面截图：

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