“钱包”和 Apple Pay 的新功能

大家好 欢迎观看“‘钱包’ 和 Apple Pay 的新功能” 我是 Tanya 我是 Masha 今天 我们将介绍 今年为“钱包”和 Apple Pay 推出的所有新功能和增强功能 过去几年 我们推出了一些新功能 比如 Apple Pay Later 和订单跟踪 并对现有功能进行了更新 以便更好地为开发者服务 今年 我们把重点放在 Apple Pay 使用方面的更新 同时专注于优化 票务相关的用户体验 今天要介绍的付款方面的第一项更新 针对的是网页版 Apple Pay 大家知道 Apple Pay 是一种 超级丝滑、安全、私密的支付方式 可用于店内支付、App 内支付 和网页支付等场景 利用 iOS 18 你能够提高 转换性能 并将 Apple Pay 的用户体验 扩展到任何具有浏览器的设备 包括 Apple 生态系统 以外的设备 iOS 18 用户能够在任何 非 Safari 浏览器上使用 Apple Pay 只需用 iPhone 扫一下付款码 即可安全私密地完成支付 对代码稍作修改后 就可以看到这个新的 交易流程的运行方式 为了尽可能简化本次更新 只需在代码中检查两项即可 首先 确保导入 Apple Pay JavaScript SDK 或将现有版本更新到 1.2.0 或更高版本 建议将它放在 HTML 文档的 head 标签中 确保页面载入时 Apple Pay 已准备就绪 如果你想测试集成 请参阅链接的开发者文档中 有关 Beta 版测试的内容 接下来 请务必使用 JavaScript SDK Apple Pay 按钮 而不是 CSS 实现的变体 使用这个组件可确保 对非 Safari 浏览器的支持能够生效 你可以查看开发者文档的链接 详细了解 如何显示和自定 Apple Pay 按钮 关于这项功能 还有一点需要注意 那就是 canMakePaymentsWithActiveCard() 已被弃用 我们将换用 新的 applePayCapabilities() API 如果你过去是依靠浏览器 或用户代理检测 来确定是否在网站上 显示 Apple Pay 那么这个新的 API 将为这一问题 提供更简洁、通用的解决方案 如果你目前只在支付逻辑中使用 canMakePayments() API 则可以继续使用 无需进一步更改 如果 canMakePayments() 返回 true 则必须始终显示 Apple Pay 按钮 如果你想在结账页面和产品页面上 优先显示或默认显示 Apple Pay 按钮 则应使用新的 applePayCapabilities() API 为了获得更准确、更详细的响应 applePayCapabilities() 调用 将返回一个对象 其中包含 paymentCredentialStatus 键 这个键会包含下面其中一个值 第一个值是 paymentCredentialsAvailable 表示设备支持 Apple Pay 并且 “钱包”中有符合网络支付条件的 有效卡 在这种情况下 Apple Pay 应显示为 第一个支付选项

第二个值是 paymentCredentialsUnavailable 表示设备能够进行支付 但“钱包”中没有可进行 网络支付的有效卡 因此不应显示 Apple Pay 按钮 paymentCredentialStatusUnkown 值 表示支持 Apple Pay 但无法获得具体的支付卡信息 这种情况常见于非 Safari 浏览器 或 Apple 生态系统之外的设备 这时仍应显示 Apple Pay 按钮 但具体的排序由开发者决定 最后一种不应显示 Apple Pay 按钮的情况是 paymentCredentialStatus 明确显示 applePayUnsupported 关于何时何处显示 Apple Pay 按钮的更多详情 请参阅《网页版 Apple Pay 的 可接受使用情况指南》 或《人机界面指南》 现在 为了展示实际运行效果 让我们去一家宠物店的网站看看

在这里 你会看到库比提诺 一家本地宠物店的网站 注意一下 我现在使用的不是 Safari 浏览器 也不是 Mac 我会直接进入结账页面... ...一旦我在结账时 点按 Apple Pay 屏幕上就会弹出 一个可供扫描的付款码 我只需拿出 iPhone 打开相机 扫描即可 在后台 这种机制所使用的支付系统 与常规的 iPhone Apple Pay 交易 是一样的 这意味着 作为开发者 你无需担心 顾客会选择哪种设备或浏览器 因为 无论顾客如何选择 你仍然会收到 与常规 Safari 浏览器网页交易 相同的支付响应日期 之前为 Safari 浏览器编写的代码 现在仍可以在各种浏览器上使用 无需修改 我只需双击确认

就可以了 交易完成 现在 我们来介绍一些 技巧和最佳实践 正如我刚才所说 务必要将 JavaScript 文件 导入到 head 标签中 以便这个文件能够尽快运行 请务必使用 JavaScript SDK 中 提供的 Apple Pay 按钮 这个按钮的 CSS 实现 不支持非 Safari 浏览器 如果你使用 W3C API 而不是 Apple Pay JS 来实现 Apple Pay 请记住并非所有浏览器都支持 Payment Request API 最后 你应该使用 现有的 canMakePayments() API 或 Apple Pay 功能 API 中新的 paymentCredentialStatus 对象 来确定应在何时何处显示 Apple Pay 按钮 今年的下一项更新是 将资金转账功能扩展到网页 大家可能还记得 去年讲座上的这张图 当时 Apple Pay 推出了 向账户拨付资金的 API 今年 随着 iOS 18 和 macOS 15 的推出 资金转账功能可以在网页上使用 提醒一下 使用资金转账功能 你可以允许用户 将储值账户或银行账户的资金 提取到注册了 Apple Pay 的 用户名下的任何卡上 你需要先与付款处理机构确认 确保相应的机构支持转账 如果你熟悉网页版 Apple Pay API 你会发现 disbursementRequest 的运作方式 与其他类型的 PaymentRequest 类似 适用于 iOS 资金转账的规则 同样适用 你可以观看去年的讲座“钱包和 Apple Pay 的新功能”回顾一下 现在举个简单的代码例子 要支持常规资金转账 不需要借助任何新功能 只要在功能列表中 添加“supports3DS”即可 如果要支持即时资金转账选项 你需要在 paymentMethodData 中 向商家功能列表添加 “supportsInstantFundsOut” 这样一来 你还可在以后指定 与即时资金转账相关的 任何额外费用 由于资金转账不涉及任何商品配送 因此 请确保在支付选项中 将 requestShipping 设置为 false 以免令用户产生疑惑 要构建付款请求 你需要 在修饰符列表中指定 disbursementRequest 对象 你可以选择在请求中包含 requiredRecipientContactFields 以指定需要用户在付款单上 提供哪些信息 即使不需要 requiredRecipientContactFields 也需要有一个空的 disbursementRequest 对象

disbursementRequest 对象下的 additionalLineItems 将遵循付款请求的现有结构 第一项是摘要项目 概括了要从用户账户中 扣除的总金额

第二项仅适用于即时资金转账请求 因为这一项用于指定交易费用 行项目类型应为 “instantFundsOutFee” 请记住 即便即时资金转账 不收取手续费 这一项也应存在 但金额应设为零 最后一项是要转到用户卡上的金额 项目类型为“disbursement”

从用户角度来看 这就是 资金转账请求的 付款单 用户可以选择要转账到哪张支付卡 并查看他们在这张卡上收到的金额

如果在处理过程中遇到错误 可以使用 ApplePayError 对象 这个对象附带第四个字段 用于指定错误适用的交易类型 如果付款处理机构确定 用户的支付卡无法接受资金转账 那么就应该使用 unsupportedCard 错误 如果问题与用户的联系信息有关 请使用 recipientContactInvalid 错误 现在是今天的最后一项支付更新： 对商家类别码的支持 商家类别码用于根据商家 提供的商品或服务类型 对商家进行分类 特定的支付卡不一定支持 所有的交易类别 通常这会导致商家端交易处理失败 今年的新功能是 你可以在付款请求中 指定商家类别码 这样 付款单就能做出 更明智的决定 只向顾客显示有效的支付卡 从而让你的交易更有可能成功 Apple Pay 支持符合 ISO 79450 标准的商家类别码 如果你不确定自身业务的 商家类别码是什么 可以向付款处理机构查询 好了 以上就是今天的支付相关更新 但讲座尚未结束 Masha 要向大家展示一些新推出的 很棒的票务更新 谢谢 Tanya 让我们来谈谈今年“钱包”中 活动门票的新功能 我们将推出更丰富的票务体验 包括“钱包”中的门票 视觉效果升级 可获取活动详细信息的 全新活动指南 以及与“天气”、“日历”等 App 更强大的系统集成 PKPasses 可代表各种活动 包括音乐会、体育比赛 或持续时间较长的活动 如节庆活动和会议 今年 我们主要针对能够代表 这些活动的 NFC 活动门票 优化了使用体验 为了让你的凭证支持这种新体验 凭证内容的结构需要满足几点要求 首先 pass.json 必须提供一组 必要的语义标记信息 语义标记是一种机器可读元数据 有助于系统更好地理解 凭证中提供的数据 要了解语义标记的更多信息 请查看本讲座的相关链接 接下来 为了指定是否希望 使用新样式呈现凭证 请在 pass.json 中添加首选样式 与目前的做法一样 需要为你的凭证签署 NFC 授权 这样持票人才能使用凭证 实现非接触式入场 请访问开发者网站上的“钱包”页面 了解关于请求这个授权的更多信息

你应继续添加所需的凭证套装内容 并考虑添加新推出的素材 让我们仔细看看凭证套装中 可以包含哪些内容 和以前一样 PKPass 套装 需要 pass.json 文件 这个文件包含凭证的大部分内容 套装中还包含图标、标志 和背景图片 对于这些新门票 我们还推出了图案素材 和 secondaryLogo 素材 如果你希望旧版操作系统 继续使用磁条图像来渲染你的凭证 请使用图案素材 如果希望所有版本的操作系统 都使用相同的背景 则使用背景素材 我们来看看每种素材 在凭证上的显示效果 在顶部 你会看到活动标志 或标志文本 在另一侧 我们会看到 即将举行的活动的日期和时间 这可能是一个时间点 也可能跨越数天 这些标签精心放置 为活动图案腾出更多空间 让活动图案更醒目 这样可使每张门票更具独特性、 更能代表你的活动

最后 在底部我们有一个新的页脚 用于显示有关座位的主要信息 PassKit 会考虑活动和场地类型 并显示最有价值的座位信息 这个页脚还可显示二级标志

这种新布局将使所有凭证保持一致 因此 持票人和引导员都更容易 快速找到活动的座位信息 和入场信息 下面我将以一个例子来讲解 构建这个凭证需要 在 pass.json 文件中包含哪些内容

活动开始日期和时间 用于顶部的标签 座位词典用于填充底部页脚的信息 最多可显示四个 入场和座位信息元素

对于跨越多天的活动 例如音乐节 现在可以提供相关的日期区间 而不是单独某一天

如果没有指定座位 可以在页脚显示入场级别 例如普通入场 接下来 让我们看看凭证下方 提供的新体验 我们添加了几个新的入口点 以便查看有关活动的更多信息 首先 这里有一个新的地图拼贴块 轻点可将用户重定向到“地图”App 让用户可以更轻松地 导航到活动地点

在右侧 我们添加了 新活动指南的入口点 活动指南可让持票人 从一处尽览一系列相关信息 以便更好地为即将到来的活动 做好准备 而且还能更快地访问 可能在活动期间派上用场的操作

在顶部 你会看到一组操作 可链接到 App 中的体验 这些链接让用户能够快速访问 相关的功能 比如点餐、 购买活动周边、查看详细的 包袋政策等 在链接下面 可以看到 活动当天当地的天气预报 接下来是场地其他详细信息 包括场地地图 和自由格式的队列标签信息 活动指南还可以包括 任何相关的播放列表链接 我们来看看 前面介绍的一些变化 在 pass.json 中意味着什么

语义标记的 URL 用于 创建顶部的可轻点拼贴块 以链接到外部体验 使用纬度和经度坐标提供场地位置 有助于推动实现地图的 重新定向和天气体验 如果没有提供坐标位置 我们将使用场地名称来 获取地图的位置

对于音乐会门票 添加表演者姓名或艺人 ID 将有助于支持音乐集成体验 要进一步了解如何查找艺人 ID 请查看相关链接 对于其他门票类型 我们将使用活动名称 来检查是否有相关的 精选音乐内容需要显示

现在 我将介绍一些 构建门票的最佳实践 我们鼓励在适配器中 尽可能使用语义标签 这将有助于在活动指南和凭证中 显示过去的信息

为确保凭证能在各种 设备上正常显示 而无论所装的操作系统版本如何 请确保在 pass.json 中包含 主要、次要和辅助字段 就像之前的做法一样 如果没有这些字段 凭证就无法进行验证 或者在旧版操作系统上显示为空白

别忘了将 posterEventTicket 指定为首选样式版本 确保过去的渲染 与新的活动样式一致 接下来 我将向大家展示相应的代码

posterEventTicket 代表 我之前展示的新门票样式 而 eventTicket 代表的是现有样式 需要指定你希望 PassKit 尝试呈现凭证的顺序

这个凭证包括 header 和 primary 字段 用于呈现旧版操作系统的 传统门票类型

在同一凭证的下方 还可以看到语义标记数据 用于呈现新门票样式

最后 只需对 pass.json 进行这些更改 你的凭证还可在最适合 显示凭证的时候 在 iPhone 和 Apple Watch 上 启动实时活动 实时活动将显示主要座位和入场信息 这样 用户就能更轻松地 直接在锁定屏幕或智能叠放上 查看最重要的信息 实时活动显示的座位信息 与之前展示的凭证页脚信息类似 同样基于 pass.json 中提供的 座位词典 票务方面的更新就到这里 我希望这些新的“钱包”凭证更新 能帮助持票人 更轻松地找到即将举行的活动 所需的所有信息 现在 再次有请 Tanya 为我们快速总结一下今天分享的内容 谢谢 Masha 今年 我们为“钱包”和 Apple Pay 推出了几项很棒的新功能 现在 你可以在 App 内 和网页上转账 使用 Apple Pay 完成 跨生态系统交易 还可为用户提供更丰富的票务体验 下面 我还想分享几个 提醒和行动建议 如果你以前使用浏览器检测 来确定 Apple Pay 的可用性 请确保使用 canMakePayments API 或新的 applePayCapabilities API 这两个 API 都是 专为解决浏览器对 Apple Pay 的 支持问题而设计 记得下载下面的示例代码 查看所有新的凭证票务更新的 实际应用情况 当然 欢迎大家通过“反馈助理” 针对今天介绍的功能 提交反馈 最后 如果你是第一次接触 网页版 Apple Pay 请观看去年的 “开始使用网页版 Apple Pay” Tech Talks 讲座 这就是今天的全部内容 希望你喜欢这场讲座 尽情享受 WWDC 的其他内容吧 感谢大家的观看