如何使用Stripe.js在Flutter Web中集成Stripe支付网关

前提准备 #

• 拥有Stripe账号，获取Publishable Key（后台可查）
• 后端实现PaymentIntent接口（用于生成支付会话的client_secret，必须后端处理，不能前端硬编码金额等敏感数据）

1. 引入Stripe JS脚本 #

在web/index.html的<head>或<body>末尾添加Stripe官方脚本：

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

2. 初始化Stripe实例 #

在Flutter Dart代码中，通过dart:js包调用Stripe JS API，先初始化Stripe实例：

import 'dart:js' as js;

class StripeService {
  late js.JsObject stripe;

  void initStripe(String publishableKey) {
    stripe = js.JsObject(js.context['Stripe'], [publishableKey]);
  }
}

3. 银行卡支付集成 #

步骤1：准备DOM容器

在web/index.html中添加一个用于挂载Stripe卡片元素的div：

<div id="card-element"></div>

步骤2：创建并挂载卡片元素

在Dart中调用Stripe Elements创建卡片表单：

void initCardElement() {
  final elements = stripe.callMethod('elements', []);
  final cardElement = elements.callMethod('create', ['card']);
  cardElement.callMethod('mount', ['#card-element']);
}

步骤3：处理支付确认

调用后端获取client_secret后，发起银行卡支付：

Future<void> confirmCardPayment(String clientSecret) async {
  try {
    final result = stripe.callMethod('confirmCardPayment', [clientSecret, {
      'payment_method': {
        'card': js.context['cardElement'], // 对应之前创建的卡片元素
      }
    }]);
    // 处理支付结果
    if ((result['paymentIntent']['status'] as String) == 'succeeded') {
      // 支付成功逻辑
    } else {
      // 支付失败逻辑
    }
  } catch (e) {
    // 捕获错误
  }
}

4. Google Pay集成 #

步骤1：检查Google Pay可用性

Future<bool> checkGooglePayAvailability() async {
  final googlePay = stripe.callMethod('googlePay', []);
  return await googlePay.callMethod('isReady', [{
    'country': 'US', // 对应你的业务国家
    'currency': 'usd'
  }]);
}

步骤2：创建Google Pay按钮并处理支付

void initGooglePayButton(String clientSecret) {
  final googlePay = stripe.callMethod('googlePay', []);
  final button = googlePay.callMethod('createButton', [{
    'onClick': () async {
      try {
        final result = await stripe.callMethod('confirmGooglePayPayment', [clientSecret, {
          'payment_method': {
            'google_pay': {},
            'billing_details': {
              'name': '用户姓名',
              'email': '用户邮箱'
            }
          }
        }]);
        if ((result['paymentIntent']['status'] as String) == 'succeeded') {
          // 支付成功
        }
      } catch (e) {
        // 错误处理
      }
    }
  }]);
  // 将按钮挂载到DOM容器
  js.context['document'].callMethod('getElementById', ['google-pay-button'])
      .callMethod('appendChild', [button]);
}

5. Apple Pay集成 #

步骤1：检查Apple Pay可用性

Future<bool> checkApplePayAvailability() async {
  final applePay = stripe.callMethod('applePay', []);
  return await applePay.callMethod('isReady', [{
    'country': 'US',
    'currency': 'usd'
  }]);
}

步骤2：创建Apple Pay按钮并处理支付

void initApplePayButton(String clientSecret) {
  final applePay = stripe.callMethod('applePay', []);
  final button = applePay.callMethod('createButton', [{
    'onClick': () async {
      try {
        final result = await stripe.callMethod('confirmApplePayPayment', [clientSecret, {
          'payment_method': {
            'apple_pay': {},
            'billing_details': {
              'name': '用户姓名',
              'email': '用户邮箱'
            }
          }
        }]);
        if ((result['paymentIntent']['status'] as String) == 'succeeded') {
          // 支付成功逻辑
        }
      } catch (e) {
        // 错误处理
      }
    }
  }]);
  // 挂载到DOM容器
  js.context['document'].callMethod('getElementById', ['apple-pay-button'])
      .callMethod('appendChild', [button]);
}

关键注意事项 #

• 所有支付核心逻辑（如生成PaymentIntent）必须由后端完成，前端仅负责调用Stripe JS完成前端交互和支付确认
• 测试时使用Stripe提供的测试卡号（如4242 4242 4242 4242）、测试Google Pay/Apple Pay环境
• 确保Flutter Web项目已启用dart:js支持（默认已启用）

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