如何在React.js中不使用Stripe通过Cybersource集成Apple Pay

前置准备 #

• 提前完成Apple Developer账号的商户ID配置、域名验证，同时在Cybersource后台绑定对应Apple Pay商户凭证，确保两端的商户ID、域名信息完全匹配
• 网站必须使用HTTPS协议访问，相关能力仅在Safari浏览器以及支持Apple Pay的Chromium内核浏览器（新版Edge、Chrome）下可触发

一、Apple Pay按钮接入方法 #

• Apple Pay按钮不需要自定义切图，直接用系统提供的<apple-pay-button>自定义元素即可，基础使用代码如下：

<apple-pay-button buttonstyle="black" type="buy" locale="zh-CN"></apple-pay-button>

• 按钮默认设置为隐藏，需要先判断当前环境支持Apple Pay后再设置显示，避免用户看到无效按钮

注意：按钮的样式、文案必须符合Apple的设计规范，不允许自行修改按钮形状、颜色，仅可通过元素自带属性调整

二、相关API说明及DOM可用性判断 #

你提到的几个API的可用逻辑和使用方法如下：

1. 基础可用判断 #

首先要先判断window.ApplePaySession是否存在，只有该对象存在的情况下后续所有Apple Pay相关方法才能调用：

if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
  // 当前设备/浏览器支持Apple Pay，显示支付按钮
  document.querySelector('apple-pay-button').style.display = 'block';
}

2. canMakePayments 方法 #

• 是ApplePaySession的静态方法，不需要额外参数，返回布尔值，仅判断当前设备是否支持Apple Pay功能，不校验用户是否绑定了有效支付卡

3. canMakePaymentWithActiveCards 方法 #

• 同样是ApplePaySession的静态方法，返回Promise，判断当前用户的Apple Wallet中是否绑定了符合你商户配置的可用支付卡：

ApplePaySession.canMakePaymentsWithActiveCard('你的Apple商户ID，格式为merchant.xxx.xxx')
  .then(canPay => {
    if (canPay) {
      // 用户有可用卡，可直接发起支付
    } else {
      // 引导用户绑定支付卡
    }
  })

4. Payment Request API 说明 #

• 这是W3C标准的通用支付请求API，Apple Pay也支持通过该API发起，不需要单独调用ApplePaySession，适合需要同时兼容多种支付方式的场景，该API挂载在window对象下，判断方式：

if (window.PaymentRequest) {
  // 支持通用Payment Request API
  const supportedInstruments = [{
    supportedMethods: 'https://apple.com/apple-pay',
    data: {
      merchantIdentifier: '你的Apple商户ID',
      countryCode: 'CN',
      supportedNetworks: ['visa', 'masterCard', 'unionPay'],
      merchantCapabilities: ['supports3DS']
    }
  }]
  // 后续构建支付详情、发起请求即可
}

两种发起方式二选一即可：如果只做Apple Pay用ApplePaySession兼容性更好，要兼容Google Pay等其他支付方式用PaymentRequest即可

三、结合Cybersource的核心交互流程 #

1. 用户点击Apple Pay按钮后，先本地构建Apple Pay的支付请求参数，包含商户ID、金额、币种、支持的卡组织等信息
2. 初始化ApplePaySession实例，监听onvalidatemerchant事件，拿到事件返回的validationURL
3. 把validationURL传给你自己的后端服务，由后端调用Cybersource的Apple Pay商户验证接口，拿到Cybersource返回的商户会话凭证
4. 调用session.completeMerchantValidation(商户会话凭证)完成Apple侧的商户校验
5. 用户验证指纹/面容后，Apple会返回支付token，你把该token传给后端，由后端调用Cybersource的收单接口完成支付
6. 根据后端返回的支付结果，调用session.completePayment(status)关闭Apple Pay支付页

内容的提问来源于stack exchange，提问作者Vishawjeet -124