如何在Flutter Web中实现Apple Pay？移动端已完成部署

前置要求 #

• 已在 Apple Developer 后台完成商户验证，配置好商户 ID及支付处理证书
• Flutter Web 项目已启用 Web 支持（可通过flutter create --web .初始化或配置现有项目）
• 目标环境为 Safari 10.1+（仅 Apple 设备支持），且设备已绑定有效支付卡

核心实现思路 #

Flutter Web 暂无官方 Apple Pay 插件，需通过 Dart 与 JavaScript 互调，直接调用 Apple Pay 原生 JS API 完成集成。

具体步骤 #

1. 编写 Web 端 JS 逻辑

在项目的web目录下创建apple_pay.js，封装 Apple Pay 会话的创建、验证及支付流程：

function initApplePay(merchantId, total, currency) {
  if (!window.ApplePaySession) {
    return Promise.reject("当前浏览器不支持 Apple Pay");
  }

  // 构建支付请求参数
  const paymentRequest = {
    countryCode: 'CN', // 按需修改为你的业务地区
    currencyCode: currency,
    merchantIdentifier: merchantId,
    supportedNetworks: ['visa', 'masterCard', 'unionPay'], // 按需配置支持的卡组织
    merchantCapabilities: ['supports3DS'],
    total: {
      label: '你的商户名称',
      amount: total
    }
  };

  // 创建 Apple Pay 会话
  const session = new ApplePaySession(3, paymentRequest);

  // 商户验证回调：调用后端获取验证会话
  session.onvalidatemerchant = (event) => {
    fetch('/api/apple-pay/validate-merchant', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ validationUrl: event.validationURL })
    })
    .then(res => res.json())
    .then(merchantSession => session.completeMerchantValidation(merchantSession))
    .catch(err => {
      session.abort();
      throw err;
    });
  };

  // 支付授权回调：将支付令牌发送到后端处理
  session.onpaymentauthorized = (event) => {
    fetch('/api/apple-pay/process-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ paymentToken: event.payment.token })
    })
    .then(res => res.json())
    .then(result => {
      const status = result.success 
        ? ApplePaySession.STATUS_SUCCESS 
        : ApplePaySession.STATUS_FAILURE;
      session.completePayment(status);
    })
    .catch(err => {
      session.completePayment(ApplePaySession.STATUS_FAILURE);
      throw err;
    });
  };

  // 启动支付会话
  session.begin();
  return Promise.resolve(session);
}

2. 在 Flutter 中调用 JS 逻辑

通过dart:js包实现 Dart 与 JS 的交互，触发 Apple Pay 流程：

import 'dart:js' as js;

// 检查当前设备是否支持 Apple Pay
bool isApplePayAvailable() {
  return js.context.hasProperty('ApplePaySession') &&
      js.context['ApplePaySession'].callMethod('canMakePayments');
}

// 发起 Apple Pay 支付
Future<void> startApplePay() async {
  try {
    await js.context.callMethod('initApplePay', [
      '你的商户ID',
      '99.00', // 订单金额（字符串格式）
      'CNY'    // 货币代码
    ]);
  } catch (e) {
    print('Apple Pay 启动失败: $e');
    // 这里可以添加用户提示逻辑，比如显示不支持的弹窗
  }
}

3. 后端核心逻辑（必做）

• 商户验证接口：接收前端传来的validationURL，向 Apple 服务器请求有效的merchantSession，返回给前端完成会话初始化
• 支付处理接口：接收前端传来的paymentToken，调用支付网关（如 Stripe、PayPal 或自建支付系统）完成扣款，返回支付结果

关键注意事项 #

• 必须使用HTTPS协议部署，Apple Pay 仅允许安全域名调用
• 测试需使用真实 Apple 设备（模拟器不支持 Apple Pay），并绑定测试支付卡
• 支付请求参数需严格匹配 Apple 规范，比如supportedNetworks和merchantCapabilities需与商户后台配置一致

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