一、前置准备

sequenceDiagram
Merchant->>Merchant: 引入Apple Pay证书
Merchant->>Merchant: 渲染Apple Pay Btn

graph TD
引入Apple Pay证书 --> 渲染Apple Pay Btn

1. Apple Pay 证书

s2s方式截图applepay需要在网站的指定路径下放入证书（请联系UseePay运营提供)

https://网站域名/.well-known/apple-developer-merchantid-domain-association.txt

请注意放入证书后需要再次联系UseePay激活证书

2. 前端

2.1 前端引入Apple Pay

请参考Apple Pay官网文档

大致流程如下，仅供参考（因为Apple Pay文档可能会升级，请您参考上述Apple Pay官网文档）

2.1.1 在网站引入apple pay js

<script src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"></script>

2.1.2 渲染Apple Pay button

if (window.ApplePaySession) {
   var merchantIdentifier = 'YOUR MERCHANT IDENTIFIER';
   var promise = ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);
   promise.then(function (canMakePayments) {
      if (canMakePayments) 
         // 在这步渲染button, Display Apple Pay button here.
     }); 
}

渲染Apple Pay button

merchantIdentifier 取值说明

环境	值
sandbox	merchant.com.sandbox.useepay
prod	merchant.com.gateway.useepay

二、支付流程

支付流程一共需要调用两个接口，分别是

1. MerchantSession接口
2. ApplePay支付接口

2.1 merchantSession

sequenceDiagram
merchant server->>UseePay: 调用merchantSession接口
UseePay->>merchant server: 返回merchantSession对象
merchant server-)merchant front: 调用apple pay sdk处理merchantSession
merchant front -) ApplePay SDK : 处理merchantSession
ApplePay SDK -) merchant front : // todo

如何调用UseePay merchantSession接口

merchantSession

如何调用ApplePay SDK处理merchantSession

1. 先构建ApplePaySessio

applepay官方文档： 构建ApplePaySession

// 构建request

const request = {
      "countryCode": "US",
      "currencyCode": "",
      "merchantCapabilities": [
        "supports3DS",
        "supportsDebit",
        "supportsCredit"
      ],
      "supportedNetworks": [
        "visa",
        "masterCard",
        "amex",
        "discover",
      ],
      "total": {
        "label": "",
        "amount": "",
        "type": "final"
      }
    }
    
// 获得session对象
const session = new ApplePaySession(5, request);

字段	备注	例子（请根据实际情况填写）
currencyCode	是当前交易币种	USD
label	交易主体	www.useepay.com
amount	交易金额	2

2. 调用ApplePaySession事件，请求Useeoay服务器获取MerchantSession

session.onvalidatemerchant = async event => {
      // 构建请求参数
      const merchantSessionRequest = buildRequest();
      // 请求Useepyay MerchantSession接口
      const merchantSession = await Api.applepayPaymentSession();
      // 使用merchantSession
      session.completeMerchantValidation(merchantSession);
};

获取MerchantSession

其中buildRequest()函数根据接口要求组装相应的参数，

3. 完成后续ApplePaySession事件
   ```js
   session.onpaymentmethodselected = event => {
   var newTotal = {
   "label": _this.orderInfo.carrierId,
   "amount": _this.orderInfo.transAmt.replace(',',''),
   "type": "final"
   };
   var newLineItems = [
   ];
   var update = {
   newTotal: newTotal,
   newLineItems: newLineItems
   };
   session.completePaymentMethodSelection( update );
   };

session.onshippingmethodselected = event => {
const update = {};
session.completeShippingMethodSelection(update);
};

session.onshippingcontactselected = event => {
const update = {};
session.completeShippingContactSelection(update);
};

如无特殊需求，上述代码可直接使用
[ApplePaySesiion event](https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778013-onpaymentmethodselected)

## 2.1 ApplePay支付

```mermaid
sequenceDiagram
merchant server->>UseePay: 调用ApplePay支付接口
UseePay->>merchant server: 返回ApplePay支付结果
merchant server-)ApplePay SDK: 调用ApplePay SDK处理支付结果
ApplePay SDK -) merchant front : 商户前端处理支付结果

session.onpaymentauthorized = async event => {
          // 构建支付请求参数
          const applepayPaymentRequest = buildPaymentRequeset();
          // 请求支付接口
          const applepayPaymentResponse = await Api.applepayPayment(applepayPaymentRequest);
          // ApplePay SDK处理支付结果
          session.completePayment(applepayPaymentResponse.applePayPaymentAuthorizationResult);

          //ApplePay SDK处理完需求后，事件结束前，商户可根据自己需求，处理支付结果,比如页面刷新或者跳转
          processPaymentResponse(applepayPaymentResponse);
        };

ApplePay支付接口