React Native如何参照Stripe集成Checkout.com Apple Pay

DevOps 小满

2026-8-29

React Native 对接 Checkout.com + Apple Pay 实操方案（对标Stripe集成逻辑）

我之前做过跨境电商App从Stripe迁移到Checkout.com的Apple Pay对接，整体逻辑和Stripe的集成路径几乎一致，迁移成本很低，下面是可直接落地的步骤和排错思路：

前置准备
- 先在Apple Developer后台完成Apple Pay Merchant ID申请、域名验证、商户CSR证书生成，这步和对接Stripe Apple Pay的前置要求完全一致，不需要额外做特殊适配
- 登录Checkout.com商户后台，确认账号已开通Apple Pay支付通道权限，拿到对应环境（沙箱/生产）的公钥、密钥，把之前生成的Apple Pay商户证书上传到Checkout.com后台的支付配置页
- 确认React Native项目版本在0.68以上，iOS端最小部署版本设置为iOS 12.0（Apple Pay官方最低支持版本）
依赖安装
- 安装Checkout.com官方React Native SDK，不用自己封装原生桥接，和@stripe/stripe-react-native的接入体验一致：npm install @checkout.com/react-native-sdk --save
- iOS目录下执行pod install拉取原生依赖，两个SDK的Apple Pay模块可以共存，不会冲突，只需要初始化时分别传入对应平台的Merchant ID即可
- 打开iOS项目的Info.plist，添加com.apple.developer.in-app-payments权限数组，把你申请的Apple Pay Merchant ID填到数组里，同时保证App的Capability里已经勾选Apple Pay选项并选中对应Merchant ID

核心对接流程（1:1对齐Stripe集成逻辑）

SDK初始化：和Stripe初始化逻辑完全一致，在App入口文件传入配置完成初始化：

import { Checkout } from '@checkout.com/react-native-sdk';

// 应用启动时执行
Checkout.init({
  publicKey: '你的Checkout.com环境公钥',
  environment: 'sandbox', // 上线时替换为production
  merchantId: '你的Apple Pay Merchant ID'
})

支付页渲染前先判断设备是否支持Apple Pay，不支持则直接隐藏Apple Pay支付按钮，逻辑和Stripe提供的isApplePaySupported方法完全一致：
```
const applePayAvailable = await Checkout.isApplePaySupported();
```

构造Apple Pay支付请求参数，参数结构和Stripe的支付请求几乎无差异，包含国家码、币种、支持的卡组织、商品明细、实付金额即可：

const applePayRequest = {
  countryCode: 'US',
  currencyCode: 'USD',
  merchantCapabilities: ['3DS', 'debit', 'credit'],
  supportedNetworks: ['visa', 'masterCard', 'amex'],
  paymentSummaryItems: [
    { label: '夏季短袖T恤', amount: '29.99' },
    { label: '运费', amount: '5.00' },
    { label: '订单实付', amount: '34.99' }
  ]
}

用户点击Apple Pay按钮时唤起支付面板，用户完成面容/指纹验证后，SDK会直接返回Checkout.com格式的支付token，不需要开发者自己处理证书加解密、卡信息组装，这步和Stripe返回支付token的逻辑完全相同：

try {
  const { token } = await Checkout.requestApplePayPayment(applePayRequest);
  // 把token传给自有后端，*不要在前端直接调用扣款接口*
  const payRes = await yourOwnPayApi({
    paymentToken: token,
    orderId: '当前订单号'
  });
  // 根据后端返回的支付结果，通知SDK关闭支付面板并展示对应状态
  await Checkout.completeApplePayPayment(payRes.success ? 'success' : 'failure');
} catch (err) {
  // 这里统一捕获用户取消支付、生物验证失败、网络异常等错误
  console.log('Apple Pay流程异常', err);
}

后端处理逻辑：拿到前端传的支付token后，调用Checkout.com的扣款接口，传入token、金额、订单号等参数完成支付，这步和Stripe后端的调用逻辑完全对齐，只需要把接口地址、鉴权密钥替换成Checkout.com的即可。

常见问题排查思路
- 点击按钮唤起Apple Pay失败提示"商户配置无效"：先检查Apple Developer后台的Merchant ID是否和当前App的Bundle ID绑定，Xcode里Capability选中的Merchant ID、Info.plist里配置的Merchant ID、Checkout.com后台上传证书对应的Merchant ID三者必须完全一致
- 前端成功拿到token但后端扣款失败：先确认当前使用的公钥、密钥和token属于同一个环境（沙箱token不能调用生产接口），另外Apple Pay生成的支付token有效期只有5分钟，不要提前生成token留着后续用
- Apple Pay面板能正常唤起，但选卡后提示"无法完成支付"：先检查Checkout.com后台是否开通了对应卡组织的Apple Pay收单权限，另外merchantCapabilities参数必须加上3DS，目前全球主流区域的Apple Pay都要求强制3DS验证
- 项目里同时集成了Stripe和Checkout.com两个SDK出现编译冲突：不要共用两个SDK的支付请求实例，初始化时分别传入各自平台分配的Merchant ID即可，两个SDK的原生依赖是隔离的，不会出现逻辑冲突

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