Flutter中如何将银行卡数据保存至Stripe以实现后续支付？

要在 Flutter 中通过 Stripe 包保存银行卡信息并用于后续支付，核心是借助 Stripe 的安全组件收集卡信息、创建支付方式（PaymentMethod）并关联到 Stripe 客户（Customer）——绝对不能直接在前端处理原始卡号、CVV 等敏感信息，否则会违反 PCI 合规要求。以下是具体实现步骤：

1. 确保包初始化完成 #

先确认已在项目中正确初始化 Flutter Stripe 包，示例初始化代码：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Stripe.instance.initialize(
    publishableKey: '你的 Stripe 发布密钥',
    merchantIdentifier: 'merchant.com.你的应用标识', // 用于 Apple Pay/Google Pay 适配
  );
  runApp(const MyApp());
}

2. 安全收集银行卡信息并创建 PaymentMethod #

使用 Stripe 官方提供的 CardForm 或 PaymentSheet 组件收集卡信息，这些组件会直接与 Stripe 服务器通信，不会让你的应用接触敏感数据。

方式一：使用 CardForm 组件 #

// 收集卡信息并创建 PaymentMethod
final paymentMethod = await Stripe.instance.createPaymentMethod(
  const PaymentMethodParams.card(
    paymentMethodData: PaymentMethodData(
      billingDetails: BillingDetails(
        name: '用户姓名',
        email: 'user@example.com',
        phone: '+1234567890',
        address: Address(
          city: '城市',
          country: '国家代码（如 US）',
          line1: '详细地址',
          postalCode: '邮编',
          state: '州/省份',
        ),
      ),
    ),
  ),
);
// 创建成功后，paymentMethod.id 就是该支付方式的唯一标识

方式二：使用 PaymentSheet 组件（更友好的用户界面） #

这种方式需要后端配合创建 SetupIntent（用于保存支付方式的会话），并返回客户端密钥给前端：

// 从后端获取 SetupIntent 的客户端密钥
final setupIntentClientSecret = await _getSetupIntentClientSecretFromBackend();

// 初始化支付表单
await Stripe.instance.initPaymentSheet(
  paymentSheetParameters: SetupPaymentSheetParameters(
    setupIntentClientSecret: setupIntentClientSecret,
    merchantDisplayName: '你的商家名称',
  ),
);

// 展示支付表单，用户完成卡信息输入后自动关联到 Customer
await Stripe.instance.presentPaymentSheet();

3. 关联 PaymentMethod 到 Customer（长期保存） #

若要长期保存支付方式，必须将 PaymentMethod 关联到 Stripe Customer。这一步必须由后端完成（不能在前端暴露 Stripe 秘钥）：

后端操作（以 Node.js 为例） #

1. 创建 Stripe Customer：

const stripe = require('stripe')('你的 Stripe 秘钥');
const customer = await stripe.customers.create({
  email: 'user@example.com',
});
// 将 customer.id 返回给前端

2. 创建 SetupIntent 并关联 Customer：

const setupIntent = await stripe.setupIntents.create({
  customer: 'cus_xxxxxxx', // 上面创建的 Customer ID
  payment_method_types: ['card'],
});
// 将 setupIntent.client_secret 返回给前端

前端完成关联 #

拿到后端返回的 SetupIntent 客户端密钥后，执行确认操作：

final clientSecret = await _getSetupIntentClientSecretFromBackend();
await Stripe.instance.confirmSetupIntent(
  clientSecret,
  const PaymentMethodParams.card(),
);
// 操作完成后，该 PaymentMethod 会永久绑定到对应的 Customer

4. 使用保存的支付方式完成后续支付 #

当需要用已保存的支付方式扣款时，同样由后端创建 PaymentIntent 并返回客户端密钥，前端确认支付：

后端创建 PaymentIntent #

const paymentIntent = await stripe.paymentIntents.create({
  amount: 1000, // 金额单位为分（示例为 10 美元）
  currency: 'usd',
  customer: 'cus_xxxxxxx', // 目标 Customer ID
  payment_method: 'pm_xxxxxxx', // 已保存的 PaymentMethod ID
});
// 将 paymentIntent.client_secret 返回给前端

前端确认支付 #

final clientSecret = await _getPaymentIntentClientSecretFromBackend();
await Stripe.instance.confirmPayment(
  clientSecret,
  const PaymentMethodParams.card(),
);

关键注意事项 #

• 所有涉及 Customer、SetupIntent、PaymentIntent 的创建操作必须在后端执行，禁止在前端暴露 Stripe 秘钥
• 永远不要在前端处理原始银行卡信息，必须依赖 Stripe 提供的安全组件
• 已保存的支付方式可通过 Stripe 控制台或 API 进行管理和查询

内容的提问来源于stack exchange，提问作者Syed Mahamudul Hasan