基于React Native与Expo实现Apple和Google Pay的技术求助

Apple Pay 实现步骤 #

• 前置准备
  • 苹果开发者账号已开通Apple Pay服务，配置好Merchant ID及对应支付证书
  • Expo项目已关联苹果开发者账号（通过expo build:ios或eas build流程完成配置）
• 安装依赖：expo install expo-apple-pay
• 核心代码示例：

  import * as ApplePay from 'expo-apple-pay';
  
  // 检测设备是否支持Apple Pay
  const checkApplePaySupport = async () => {
    return await ApplePay.isAvailableAsync();
  };
  
  // 构建支付请求参数
  const buildApplePayRequest = () => ({
    countryCode: 'CN', // 替换为业务对应地区编码
    currencyCode: 'CNY',
    merchantIdentifier: 'com.your.merchant.id', // 替换为你的Merchant ID
    supportedNetworks: ['unionpay', 'visa'], // 配置支持的卡组织
    merchantCapabilities: ['3DS', 'credit', 'debit'],
    total: {
      label: '你的商户名称',
      amount: '19.99',
      type: 'final',
    },
  });
  
  // 发起Apple Pay支付
  const triggerApplePay = async () => {
    const paymentRequest = buildApplePayRequest();
    try {
      const paymentResult = await ApplePay.requestPaymentAsync(paymentRequest);
      if (paymentResult.status === 'success') {
        // 将Apple返回的支付凭证传给后端完成交易验证
        const paymentToken = paymentResult.payment.token;
        // 调用后端支付接口
      }
    } catch (err) {
      console.error('Apple Pay支付失败:', err);
    }
  };
  

• 注意事项
  • 仅真实苹果设备支持Apple Pay，模拟器无法测试
  • 支付凭证必须由后端对接苹果支付接口完成验证，前端仅负责收集传递
  • 支付请求参数需与后端配置严格一致，否则会触发支付失败

Google Pay 实现步骤 #

• 前置准备
  • 谷歌开发者账号已完成Google Pay商户信息配置，获取Merchant ID
  • Expo安卓项目已完成基础权限配置（Expo会自动处理Google Pay相关权限）
• 安装依赖：expo install expo-google-pay
• 核心代码示例：

  import * as GooglePay from 'expo-google-pay';
  
  // 检测设备是否支持Google Pay
  const checkGooglePaySupport = async () => {
    return await GooglePay.isAvailableAsync({
      environment: GooglePay.Environment.TEST, // 上线后切换为PRODUCTION
      allowedPaymentMethods: ['CARD'],
    });
  };
  
  // 构建Google Pay支付请求
  const buildGooglePayRequest = () => ({
    environment: GooglePay.Environment.TEST,
    merchantInfo: {
      merchantId: 'your-google-merchant-id', // 替换为你的Google Merchant ID
      merchantName: '你的商户名称',
    },
    allowedPaymentMethods: [
      {
        type: 'CARD',
        parameters: {
          allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
          allowedCardNetworks: ['VISA', 'MASTERCARD'],
        },
        tokenizationSpecification: {
          type: 'PAYMENT_GATEWAY',
          parameters: {
            gateway: 'your-custom-gateway', // 与后端支付流程对应的网关标识
            gatewayMerchantId: 'your-gateway-merchant-id',
          },
        },
      },
    ],
    transactionInfo: {
      totalPriceStatus: 'FINAL',
      totalPrice: '19.99',
      currencyCode: 'CNY',
      countryCode: 'CN',
    },
  });
  
  // 发起Google Pay支付
  const triggerGooglePay = async () => {
    const paymentRequest = buildGooglePayRequest();
    try {
      const paymentResult = await GooglePay.requestPaymentAsync(paymentRequest);
      if (paymentResult.status === 'success') {
        // 将Google返回的支付数据传给后端完成验证
        const paymentData = paymentResult.paymentData;
        // 调用后端支付接口
      }
    } catch (err) {
      console.error('Google Pay支付失败:', err);
    }
  };
  

• 注意事项
  • 测试环境可使用谷歌官方提供的测试卡号，无需真实卡片
  • 上线前需切换为Environment.PRODUCTION，并确保商户信息通过谷歌审核
  • tokenizationSpecification参数需与后端支付逻辑匹配，不可随意配置

定制化替代方案 #

若Expo官方模块无法满足定制需求，可基于Expo模块工具链开发自定义原生模块：

• iOS端：基于Apple Pay原生SDK编写Swift/Objective-C代码，通过Expo桥接层暴露给React Native调用
• 安卓端：基于Google Pay原生SDK编写Kotlin/Java代码，实现支付请求、结果回调的桥接逻辑
• 核心逻辑为：前端触发支付请求→原生层调用系统支付组件→将支付凭证传回前端→前端传给后端完成验证

核心原则提醒 #

• 所有支付核心逻辑（金额校验、凭证验证、交易确认）必须放在后端，前端仅负责触发支付和传递凭证
• 严格遵循苹果、谷歌的支付规范配置商户信息，否则会导致支付功能无法正常使用或应用审核不通过

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