Web/WAP

此章节为您提供 Web/WAP 端 Apple Pay 支付方式的 SDK 集成指南，帮助您快速开始电脑浏览器及手机浏览器内与 Apple Pay 支付方式相关页面的渲染。

集成准备

在开始集成前，您需要：

安装 npm 包管理器。
处理兼容性问题：对于 IE 系列浏览器或其他低版本浏览器，需要提供相应的 Polyfill 支持，在项目构建时，建议使用 babel-preset-env 来解决浏览器兼容问题。
使用建议的浏览器版本：
- 手机浏览器：使用 iOS 11 及以上版本的浏览器
- 电脑浏览器：使用最近两个版本的 Safari 浏览器

集成步骤

请根据以下步骤完成集成：

集成 SDK 资源包

商户客户端

请查阅 Web/WAP 端集成 SDK 资源包文档。

选择 Apple Pay 账户

对于 Appla Pay 在 Web 端的集成，如果您选择 Antom 提供的 Apple Pay 开发者账户，请跳过步骤 3 及步骤 4，直接执行步骤 5。如果您使用自己注册的 Apple Pay 开发者账户，请先完成步骤 3 和步骤 4，再执行步骤 5。

获取 Apple 商家标识符（可选）

在表单中填写描述和标识符，确保准确描述您的应用，标识符建议使用您的应用名，例如：merchant.com.{{YOUR_APP_NAME}}）。

更多注册细节请参考 Apple Pay 官方集成文档。

创建新的 Apple Pay 证书（可选）

Apple Pay 证书可以为您的应用加密支付数据。请按照以下步骤为您的应用创建证书：

联系 Antom 技术支持获取证书签名请求 (CSR) 文件，以获取 Apple 安全证书。
打开 Apple 开发者中心的 Merchant IDs 管理页面（Certificates, Identifiers & Profiles 页面），点击 Identifiers，选择要添加证书的 Merchant ID 和商家标识符，在 Apple Pay Payment Processing Certificate 选项下点击 Create Certificate，在 Create a New Certificate 页面点击 Choose File，选择您从 Antom 获得的 CSR 文件，上传成功后 Apple Pay 会为您提供一个可下载的证书文件。
回到 Merchant IDs 管理页面，点击 Identifiers，在 Apple Pay Merchant Identity Certificate 选项下点击 Create Certificate，在 Create a New Certificate 页面点击 Choose File，选择您从 Antom 获得的 CSR 文件，上传成功后 Apple Pay 会为您提供一个可下载的证书文件。
两种证书文件下载到您的本地后，请将文件发送给 Antom 以验证您证书详情的正确性。

更多操作细节请参考 Apple Pay 官方集成文档。

注意

CSR 文件与证书一一对应，如果您切换了 Apple 商家 ID，须重新获取 CSR 文件并创建新的 Apple 安全证书。
首次点击 Create Certificate 时会出现以下提示，选择 No 并继续。

Web/WAP

注册并验证您的域名

如果您使用自己的 Apple Pay 开发者账户，请参考 Apple Pay 官方集成文档注册并验证您的域名。

如果您使用的是 Antom 提供的 Apple Pay 账户，请将域名发送给 Antom，并按照 Antom 后续的回复，在该域名指定路径中上传一个有特定文件名的文件（该文件请联系 Antom 获取），用于域名验证。

检查用户设备是否支持 Apple Pay

请使用右侧代码检查您用户的设备是否支持 Apple Pay。如果支持您可在您的应用程序中显示 Apple Pay 这一支付选项。

Editor

通过 AMSCashierPayment 构造函数创建 SDK 实例：

商户客户端

创建 config 对象：必传，Object 类型。包含所有配置参数：
- environment：必传，String 类型。用于传入环境参数，支持的值包括：
  - sandbox：沙箱环境
  - prod：生产环境
- analytics：选传，Object 类型，用于配置分析数据服务，包含以下参数：
  - enabled：选传，Boolean 类型。默认值为 true ，代表允许 SDK 上传分析运行数据以提供更好的服务。如您不允许上传分析运行数据，需指定此值为 false 。
- onLog：选传，输出 SDK 运行期间触发的日志、接口异常等错误信息的回调函数。
- onEventCallback：选传，SDK 运行期间支付发生特定事件触发回调并返回具体事件码，例如支付结果、表单提交异常等。
- onError：选传，在 SDK 运行期间发生错误时被触发（如初始化异常、网络超时等问题）。
实例化 AMSCashierPayment。

注意：使用 environment 设置环境参数时需要与步骤 8 发起 支付会话创建 请求的环境保持一致。

npm 引包方式和 CDN 引包方式展示创建 SDK 实例的代码示例：

npm

CDN

Editor

向 APO 服务器发起支付会话创建请求。

商户服务端

买家在支付方式选择页选择 Apple Pay 后，您的客户端需自行实现支付按钮的点击事件监听。当监听到支付按钮被买家点击后，您的服务端需向 APO 服务器发起 支付会话创建 请求。收到支付会话创建请求的响应后，将响应中的 paymentSessionData 参数值用于步骤 9 。

注意：在调用 支付会话创建 接口时，请求参数 paymentRedirectUrl 的值需要使用您提供的支付完成后跳转页面对应的 URL scheme。

发起支付会话创建请求

请求示例

响应示例

Editor

使用实例对象中的 createComponent 函数创建支付组件:

商户客户端

使用 sessionData 参数创建配置对象: 将 支付会话创建 请求的响应中获取的 paymentSessionData 字段的完整数据传入 sessionData 参数。
调用实例对象中的 createComponent() 函数，返回值为 Promise。支付区块 DOM 节点即可根据参数在当前页面渲染出浮层视图。
调用实例对象中的 unmount() 函数进行 SDK 组件的资源回收，请在以下三种场景中调用：
- 用户切换视图退出支付页面，需要回收 支付会话创建 中的组件资源。
- 用户发起多笔支付，需要回收上一次 支付会话创建 中的组件资源。

调用 createComponent()

Javascript

Editor

事件码

SDK 提供的支付事件码有以下几种：

SDK_PAYMENT_SUCCESSFUL：支付已受理。您可以调用 支付结果查询 接口查询支付结果。
SDK_PAYMENT_FAIL：支付失败。请您根据下方 errorCode 提示信息重新引导用户支付。
SDK_PAYMENT_PROCESSING：支付处理中。您可以调用 支付结果查询 接口查询支付结果。
SDK_PAYMENT_ERROR：支付状态异常。请您根据 message 中的数据信息排查可能出现的问题。
SDK_PAYMENT_CANCEL：支付取消。买家未点击支付并关闭支付窗口。可以用在有效期内的 paymentSessionData 重新调用SDK。如已过期，需要重新请求 paymentSessionData。

服务端结果码（result.errorCode）：

错误码	值	消息	建议
SUCCESS	S	Success	-
ORDER_NOT_EXIST	F	The order does not exist.	建议重新下单。
PAYMENT_IN_PROCESS	U	The payment is being processed.	等待支付通知或主动查询结果。
PROCESS_FAIL	F	A general business failure occurred.	通常需要人工确认该问题。建议您联系 Antom 技术支持解决该问题。
UNKNOWN_EXCEPTION	U	An API call has failed, which is caused by unknown reasons.	等待支付通知或主动查询结果。
INQUIRY_PAYMENT_SESSION_FAILED	F	Failed to retrieve paymentSessionData, which may have expired or is in an unknown state.	会话已过期。等待支付通知或主动查询结果。
PAGE_ELEMENT_ILLEGAL	U	The payment information is incorrect.	支付被拒绝，支付要素填写错误。