开始使用网页版 Apple Pay

Tom Grant：欢迎观看！ 我叫 Tom 我是 Apple Pay 电子商务团队的一员 自 Apple Pay 推出以来 我一直与不同的 技术团队合作 帮助发布商家和支付网关 Apple Pay 电子商务集成 今天 很高兴分享 我们多年来积累的 一些关键知识 和最佳做法 并展示如何使用 Payment Request API 将 Apple Pay 集成到 你的网站 Apple Pay 于 2014 年 10 月 在美国推出 自此之后 我们取得了令人难以置信的进展 Apple Pay 现已覆盖 全球超过 75 个市场 数百万品牌 已将其集成到 自己的 App 和网站中 Apple Pay 的运作 离不开特定于设备的 令牌化卡片凭证 Apple Pay 交易的 处理方式 与普通信用卡 或借记卡相同 Apple 不负责处理 Apple Pay 付款 因此你仍需要 与支付服务提供商 建立合作关系 这可以是 你如今接受在线付款时 所选的提供商 为了更好地理解 付款流程 让我们来看看 在网页上进行 Apple Pay 交易时 会发生什么 当顾客点按 Apple Pay 按钮 并且出现付款单 让顾客选择并确认 自己的详细信息时 交易流程开始 然后顾客 对交易进行认证 付款数据 经过加密后 会传递到网站 你的网站 将 Apple Pay 付款对象 发送到商家服务器 你的服务器收到付款对象后 将数据发送给 支付服务提供商 进行处理 支付服务提供商 解密付款数据 然后格式化并向收单方 发送授权信息 收单方然后向支付网络 发放付款 支付网络对数据进行 去令牌化操作 然后将卡号发送给 发卡机构进行授权 然后通过支付链 发回付款确认 并且付款单上 会显示对勾 来通知顾客 这个流程 看起来很长 但实际上这一切 在几秒钟内即可完成 现在我们已经了解了 网页上的 Apple Pay 交易进行时 幕后会发生什么 接下来让我们了解一下 顾客体验 为此我们将前往 Apple Pay 演示站点 网址为 applepaydemo.apple.com 这个网站是帮助掌握 网页版 Apple Pay 相关知识的 绝佳资源 让你能够在卡片 不被扣款的情况下 设置并测试交易 如果你在进行集成时 遇到困难 那么 Apple Pay 演示网站是一个 不错的参考资源 可以帮助你 找到解决办法 这个工具支持 许多不同类型的 Apple Pay 配置 包括送货信息、 错误处理等 现在 让我们 完成简单操作 并保留 默认设置 看看基本交易 是怎样的 首先点按 Apple Pay 按钮 屏幕上将显示 一个模态表单 我们将其称为 付款单 顾客选择 付款选项 并对交易 进行认证 系统将发送交易 进行处理 处理结果将显示在 付款单的底部 付款完成后 付款单将关闭 就是这么简单 我们已经完成了一笔示例付款 现在你已经了解了 典型的 Apple Pay 交易是怎样的 接下来让我们进行设置 以接受 Apple Pay 我们将了解如何 将 Apple Pay 与 Payment Request API 进行集成 Payment Request API 提供了 跨浏览器的标准 让你能够从顾客处收集付款、 送货地址 和联系信息 然后你可以使用 这些信息 来处理他们的订单 Payment Request API 简化了付款流程 同时能够确保安全性、 一致性和可访问性 如果你已经 将 Apple Pay 与 Apple Pay JavaScript API 进行集成 你应该熟悉 此视频中的步骤 让我们看看 要集成 Apple Pay 需要做些什么 首先我将分享 要配置环境 以接受 Apple Pay 需要完成的步骤 接下来我将展示 如何实现 Apple Pay 包括从创建付款请求 到完成交易的 整个过程 最后 我将带大家了解一些工具 可以使用这些工具 来测试 Apple Pay 实现 要介绍的内容很多 在课程结束时 你将能够 深入了解 如何将 Apple Pay 集成到你的网站中 让我们首先 配置你的环境 首先 确认 你的支付服务提供商 支持 Apple Pay 交易 他们也可能通过自己的 SDK 提供 Apple Pay 这是将 Apple Pay 添加到你的网站的 一种可靠且简便的方式 确认你的服务器 具有有效的 SSL 证书 而且还能使用 TLS 1.2 或更高版本 要与 Apple Pay 服务器 进行通信 需要满足这一条件 最后 确保所有 显示 Apple Pay 的页面均通过 https:// 来实现内容显示 确认上述事项后 我们可以开始创建 将在设置 Apple Pay 过程中 使用的凭证 现在可以通过两种主要方式 来创建这些凭证 你可以通过 Apple Developer 门户 自行创建和管理 这些凭证 或者直接向支付服务提供商注册 要了解 你的网站所需的 具体配置 请联系 支付服务提供商 以了解更多信息 在接下来的步骤中 我将展示 如何通过 Apple Developer 门户 创建和管理 凭证 你的组织可能已有 Apple Developer 账户 特别是如果已经在 App Store 中 发布 App 让你的账户管理员 将你添加到 App Store Connect 的 “用户和访问”部分 如果你的组织 还没有账户 请在 developer.apple.com/cn 上 注册 每笔 Apple Pay 交易的核心是 商家标识符 它将你标识为 接受 Apple Pay 付款 每个商家的标识符都是唯一的 我们建议使用反向域名 样式的字符串 接下来 创建付款处理证书 证书用于对从顾客设备 传递给你的付款数据 安全地进行 加密和解密 你可能会 从支付服务提供商处 收到创建此证书的 证书签名请求 因为他们是 对交易进行解密的一方 然后 创建 商家身份证书 此证书用于 在顾客发起付款时 验证你的 商家身份 最后 注册并验证 会在网站中显示 Apple Pay 按钮的 域和子域 为此 你需要 在 Apple Developer 门户的 “Merchant Domain”(商家域) 部分中输入你希望验证的 完全限定域 这样会生成一个文件 你需要下载此文件 并放置在服务器上的 .well-known 路径中 然后点按 “Verify”(验证) 按钮 Apple 服务器 将与此位置进行通信 验证它是不是存在 在配置环境 并创建商家 ID 后 现在你可以在你的网站中 实现 Apple Pay 为了更好地理解 我们将构建哪些内容 让我们来更详细地了解一下 网页上的 Apple Pay 交易 当顾客点按或轻点 Apple Pay 按钮时 交易开始 网站将创建 包含所有交易详情的 付款请求 然后与商家服务器进行通信 以请求建立新的会话 验证商家的 身份后 Apple Pay 服务器 将生成并返回 商家会话对象 系统会将此对象传回网站 以完成 验证流程 顾客然后可以 确认付款单上的详细信息 并使用面容 ID、 触控 ID 或密码 对交易进行认证 系统将在用户的设备上 生成付款数据 并安全地发送到 Apple Pay 服务器 以使用特定于商家的 付款处理证书进行加密 然后付款数据 将返回你的网站 这些数据然后 会被发送给支付服务提供商 进行解密和处理 支付服务提供商 将返回付款状态 网站将通知用户 交易是否成功 如果成功 系统将关闭付款单 整个流程可以 分为四个关键阶段： 显示 Apple Pay、 商家验证 付款认证 和付款处理 首先是 显示 Apple Pay 这包括显示 Apple Pay 按钮 和显示 付款单 接下来是商家验证 在这一阶段 系统将使用双向 TLS 在 Apple 和商家服务器之间 交换证书 然后是付款认证 在这一阶段 系统将确认 并生成付款交易 最后是 付款处理阶段 在这一阶段 处理主要在商家 和付款服务提供商 之间进行 这些步骤组合在一起 为在网页上进行的 Apple Pay 付款交易 奠定了基础 我们将根据此流程 来构思 实现 Apple Pay 的方法 首先让 Apple Pay 显示为我们网站上的 一个付款选项 当顾客使用 受支持的设备时 应该显示 Apple Pay 按钮 要核实顾客的设备 是否支持 Apple Pay 请调用 ApplePaySession.canMakePayments 务必考虑 哪种按钮最适合 你的结账流程 Apple Pay API 提供了类型和风格 多样的按钮 以供你在网站中使用 因此你可以选择 最适合 你在购买体验中打造的 购买流程的按钮 使用系统提供的按钮 可保证你使用的是 Apple 批准的 字体、颜色、文字说明和样式 可以使用 JavaScript 或 CSS 将按钮导入网站 并通过属性 轻松设置样式、 类型和本地化内容 要使用 JavaScript SDK 添加按钮 请载入来自内容分发网络的 按钮脚本 你可以设置 CSS 属性 例如边框半径 使按钮风格与当前 UI 更好地保持一致 最后 向页面添加 Apple Pay 按钮元素 并设置样式、类型 和区域设置属性 在本例中 我们选择 使用黑色这一按钮样式 使用文字说明“Check Out with Apple Pay” 并将文字说明本地化为德语 为了查看可用的 Apple Pay 按钮选项 让我们返回 我们之前查看过的 Apple Pay 演示网站 你可以在这里快速轻松地 更改 Apple Pay 按钮的 属性和 CSS 属性 页面底部 会实时显示结果 通过这种方式可快速轻松地 生成 Apple Pay 按钮 并将代码拷贝并粘贴到 你的网站中 在这里 你可以选择 按钮样式 我选择了黑色 然后你可以选择 最相配的类型 最后一个属性 是语言 让我们将此按钮本地化为德语 就像在之前的示例中那样 再往下 显示了 CSS 属性 例如按钮宽度、 高度、 圆角半径和边距 按钮的配置会 在选项下方的 代码块中 显示和更新 可以将这些内容拷贝并粘贴到 现有代码中 有多种不同的 付款请求类型可供选择 这让你能够 向顾客显示 有关交易的 其他信息 典型交易 用于处理一次性付款 但 Apple Pay 也提供了 用于处理订阅等 定期付款、 购物卡充值等 自动充值付款 和预购等 延期付款的 付款请求选项 现在 让我们来看看 如何为一次性付款 构建付款请求 要使用 Payment Request API 接受 Apple Pay 付款 你首先需要使用标识符 将其指定为一种付款方式 在本例中付款方式为 apple.com/apple-pay 除了标识符 我们还需要包含 一些相关数据 这包括版本号 我们建议使用 发布的最新版本 因为它包含 所有最新的 Apple Pay 功能 请查看 developer.apple.com/cn 了解最新信息 我们还需要 之前配置的 merchantIdentifier 你希望支持的 功能和网络 以及处理付款的 国家或地区的代码 正确设置这些信息 特别重要 可确保在 PSD2 市场中 生成兼容的密码 你可以选择包含 为了确定顾客的账单邮寄地址 和/或送货地址 而需要知晓的 详细联系信息 在这里 我们请求提供 顾客的送货地址 然而 在请求提供 顾客数据时 信任和隐私是极为重要的 考虑因素 只请求提供 处理交易 所需的信息 以确保 获得最佳 Apple Pay 转化率 接下来需要 为交易创建 details 对象 这包括三个属性：displayItems 在其中你可以包含 税费、费用和折扣； shippingOptions 它让顾客 能够选择 订购物品的送货方式 这非常适合用来提供 快速结账选项； 最后是 total 它包含货币 和收费金额 以及包含商家名称的 标签 商家名称值 应该是 顾客可以 与企业联系起来的名称 并且在付款单中 旁边显示有 “pay”字样 在 details 对象中 你还可以包含 适用于交易的 任意修饰符 修饰符包含 仅在特定条件下 才适用的交易详情 例如你可能希望添加 使用信用卡付款时适用的 附加费 如果你想要 提出定期付款请求 例如用于订阅 还可以在此处 包含定期付款请求的 详细信息 现在我们可以 将所有这些元素组合在一起 发起新的 付款请求 创建新的 付款请求对象 并向构造函数 传递 methods、 details 和 options 正如我们所探讨的 Apple Pay 的 一大优势是 它可以用作快速结账选项 以帮助提高 转化率 你需要确保提供 尽可能顺畅无缝的体验 为此 你应该 在显示 Apple Pay 按钮之前 核实用户是否具有 可用于付款的卡片 这可以使用 付款请求的 canMakePayment 方法来实现 此方法核实 顾客是否使用了 支持 Apple Pay 的 设备和浏览器 并且仅当 顾客具有 可用于付款的卡片时 才会解析为 true 当顾客轻点 Apple Pay 按钮时 你应该使用 show 方法 来显示付款单 显示付款单后 系统会显示 处理动画 并立即开始 商家验证 流程 下面我们来看看 这涉及哪些步骤 每笔网页版 Apple Pay 交易 都要完成 商家验证流程 这是一项重要的 安全措施 可确保 付款 由获得了授权的 合法商家进行处理 这有助于保护用户 免受欺诈交易影响 并增强 付款流程的 整体安全性 商家验证流程涉及三方： 商家网站、 商家服务器 以及 Apple Pay 服务器 当按下 Apple Pay 按钮时 系统会通过调用 onmerchantvalidation 处理程序 来自动触发 商家验证 在此处理程序中 需要调用 商家服务器上的 端点 以请求使用 静态主机名 apple-pay-gateway.apple.com 作为验证 URL 来创建新的会话 为保护 证书安全 向 Apple Pay 服务器 发出的请求 必须来自 商家服务器 而不是直接来自 浏览器 这样商家身份证书 才会安全 而不会与 用户和其他各方共享 使他们无法冒充 你的网站 为请求创建新的会话 商家服务器会构建 会话请求有效负载 并使用双向 TLS 将其发布到 Apple Pay 服务器 此连接 使用的证书 是商家 身份证书 验证商家身份后 系统会生成 新的商家会话对象 并将此对象返回 服务器 不应以任何方式 修改此对象 否则商家验证 将失败 商家会话对象 然后被传递回浏览器 然后将商家会话对象 传递给 完成方法 以完成 商家验证流程 系统然后会启用 付款单 以供顾客与之交互 我们来看看如何 以编码方式完成此流程 当按下 Apple Pay 按钮时 系统将触发 onmerchantvalidation 处理程序 在此处理程序中 应调用 服务器上的端点 以处理 创建商家会话的请求 浏览器收到 商家会话对象后 此对象将以 JSON 格式传递 并被用于 complete 回调 以完成整个流程 如果商家验证成功 付款单会更新 以告知顾客 准备确认 付款 如果商家验证失败 在用户顾客 点按 Apple Pay 按钮后 付款单会 立即关闭 如果你遇到 与商家验证有关的问题 可以在处理 商家验证的过程中 使用 Safari 浏览器 内建网页检查器 工具中的控制台 来记录错误和对象 你或许之前从未使用过 网页检查器 它提供了一套强大的工具 可用于调试和检查网页、 网页扩展以及 WKWebView 在 Mac 上运行 网页检查器时 可以使用此工具来调试 在任一连接的设备上 运行的代码 如需进一步了解网页检查器 请查看 WWDC23 中的 “Rediscover Safari Developer Features” 介绍完 商家验证后 现在我们来深入了解 付款认证 当用户更改或更新 付款单上的栏位时 所选的选项 将通过事件处理程序共享 以便网站可以 响应用户输入 这类处理程序的示例如下： 顾客选择了 付款方式 包括优惠券代码； 所选的送货选项 有所更新； 或者送货地址的 相应地点 发生更改 当浏览器调用 一个处理程序时 你有 30 秒的时间 来处理它 并调用 updateWith 回调函数 确保用于检查送货地址有效性的 所有服务器调用 都在这一 30 秒的窗口期内完成 如果未在这一时间 调用回调函数 付款单上将显示 一条信息 指出无法 完成付款 下面我们来更详细地了解一下 onshippingaddresschange 处理程序 在用户对交易 进行认证之前 系统会将经过编辑过的 送货联系信息 共享给 商家网站 出于隐私考虑 这仅包括 计算最终交易成本 所需的数据 例如税费 或运费 在收到 这些信息后 你可以计算 相关费用总计 如果你确定 顾客提供的 地址或联系信息 有问题 也可以 自行创建 自定 错误信息 在错误信息中 你可以重点指出 需要注意的栏位 并提供清晰明了 且切实可行的指导 使顾客能 更轻松地 快速解决问题并完成交易 当 Apple Pay 向你提供数据时 你可以像验证 今天在网站上操作的 手动输入栏位那样 验证这些数据 当你确定 用户的地址 或联系信息 有问题时 可以使用 ApplePayError 创建自定错误信息 你在 ApplePayError 中 提供的详细信息包括 一个错误代码 它用于标识出现错误的 付款单区域； 联系信息栏位 它是付款单上出现错误的 具体栏位； 最后是要在付款单上 显示的自定信息 ApplePayError 然后会 从事件传递回 updateWith 回调 你还可以在用户使用 面容 ID 触控 ID 或密码 对交易进行授权后 验证用户的 完整地址和联系信息 如果用户的地址信息 有问题 你可以让他们 重试交易 并重点指出 需要解决的问题 如果有错误对象 附加到 errors 数组 你可以 阻止用户结账 直到信息格式 符合验证规则的 相应要求 建议尽可能 灵活地 指定地址格式 以确保用户可以 成功完成交易 Apple Pay 有效负载中 还有付款令牌 其中包含 处理交易所需的信息 如果要对付款令牌 进行解密 应在这个时候完成 在大多数情况下 支付服务提供商 负责处理 解密过程 你可以将令牌直接 发送给他们进行处理 此令牌还包含 交易所用卡片的 显示名称 其中包括网络 和卡号的 最后四位数字 这不同于 特定于设备的令牌 你应该使用此令牌 向顾客说明 使用了 哪张卡片 进行交易 例如在订单确认电子邮件中 或收据上 以上就是 付款认证的相关内容 最后我们来了解一下 付款处理 支付服务提供商 执行此流程后 系统必须将结果 传递到 complete 方法 以告知顾客 结果 如果交易成功 系统将传入 success 来完成这一步 这会更新付款单 以显示对勾 然后关闭付款单以完成 Apple Pay 付款流程 有时付款可能会失败 在这种情况下你可以 将 fail 传递给响应处理程序 付款单 将显示感叹号 并且系统会 提示顾客重试 你也可以关闭 付款单 至此 我们现在 已经介绍了 实现 Apple Pay 需要完成的四个主要步骤 当然 如果不提及测试 有关实现的讨论 是不完整的 最后 让我们简单了解一下 如何测试你的解决方案 为此 请前往 Apple Pay 沙盒测试网站 在这个网站中 你能够找到 可以在设备上预置的 沙盒信用卡号 以测试你的前端集成 和解密过程 请记住 如果将沙盒信用卡 发送到 生产付款处理环境 则无法 成功处理 沙盒信用卡 非常适合进行测试 不过我们建议在将 Apple Pay 实现 推送用于生产之前 先使用真卡 进行测试 使用真实卡进行测试可确保 完整的端到端 付款处理流程 按预期方式运作 以上就是测试 和网页版 Apple Pay 入门概览的 全部内容 我讲了很多 包括配置 和实施 以及沙盒测试 跟大家告别之前 我要提供一些后续步骤 以帮助你继续推进 Apple Pay 集成之旅 首先 务必访问 Apple Pay 演示网站 要构建 Apple Pay 解决方案 这是理想的着手点 查阅已链接到本讲座的 《商家集成指南》 此指南详细介绍了 精心设计的 Apple Pay 实现过程中的 每个步骤 最后 查看《人机界面指南》的 Apple Pay 部分 在其中你可以找到 有关如何在网站上 显示 Apple Pay 和付款单的 详细用户界面指导 感谢大家参加 祝大家顺利完成 Apple Pay 集成之旅