WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
What's new in Wallet and Apple Pay

What's new in Wallet and Apple Pay

WWDC 2024
观看原视频

Highlight

iOS 18 让 Apple Pay 支持所有浏览器：用户在非 Safari 浏览器点击 Apple Pay 按钮后，用 iPhone 扫描屏幕上的二维码即可完成支付，开发者收到的 payment response 格式与 Safari 完全一致。

核心内容

Apple Pay on the web 一直有个硬伤：只有 Safari 能用。你的电商站点如果在 Chrome、Firefox 上被打开，Apple Pay 按钮根本不会出现。很多开发者为此写了浏览器嗅探逻辑，在 Safari 里显示 Apple Pay，在其他浏览器里回退到信用卡表单。结果是结账体验割裂，移动端非 Safari 浏览器的用户白白流失。

iOS 18 打破了这个限制。用户在任何浏览器上点击 Apple Pay 按钮，页面弹出二维码，用 iPhone 扫码确认即可支付。底层走的是和 iPhone 端 Apple Pay 完全相同的交易系统，开发者收到的 payment response 数据格式和 Safari 内支付一模一样，服务端代码不需要任何修改。开发者的改动只有两处：引入 Apple Pay JS SDK 1.2.0+，以及使用 SDK 提供的按钮组件而非 CSS 实现。

Session 还覆盖了另外两项支付更新。一是资金转出（Disbursement）扩展到了 web 平台——去年 iOS 端上线的提现功能，现在 macOS 15 的 Safari 也能用了，用户可以把 app 内余额转到绑定的银行卡。二是 Merchant Category Code 支持：在 payment request 里指定你的商户类别代码后，支付界面会智能过滤掉不支持该类别的卡片，降低交易失败率。

后半段 Masha 介绍了 Wallet 票务的大改版。NFC 活动门票获得了全新的视觉布局：顶部是活动 logo 和日期，中间是大面积的活动 artwork，底部 footer 集中展示座位信息。票面下方新增了地图跳转入口和 Event Guide——一个聚合了快捷操作（点餐、买周边、查行李政策）、天气预报、场馆地图和音乐播放列表的信息中心。只要在 pass.json 里填好语义标签数据，票就会在最相关的时间自动启动 Live Activity，在锁屏和 Apple Watch 上显示入场信息。

详细内容

Apple Pay on the web：非 Safari 浏览器支持

开发者需要做两件事（01:15）：

  1. 引入 Apple Pay JS SDK 1.2.0 或更高版本，放在 HTML 的 <head> 里。
  2. 使用 SDK 提供的 <applepay-button> 组件，而非 CSS 实现的按钮。CSS 按钮不支持非 Safari 浏览器。

同时，canMakePaymentsWithActiveCard() 被废弃，推荐使用新的 applePayCapabilities() API（02:05）。它返回的 paymentCredentialStatus 有四个值：

  • paymentCredentialsAvailable：设备支持 Apple Pay 且有可用卡片，应将 Apple Pay 设为首选支付方式。
  • paymentCredentialsUnavailable：设备支持但无可用卡片，不显示按钮。
  • paymentCredentialStatusUnknown：Apple Pay 受支持但卡片信息不可用（非 Safari 浏览器会走这个分支），应显示按钮，排列顺序由开发者决定。
  • applePayUnsupported：不显示按钮。

如果你目前只用 canMakePayments() 且返回 true 时已展示按钮，无需改动，功能自动生效。

Funds Transfer on the web（05:45）

资金转出请求的构建方式和普通 PaymentRequest 类似，关键配置如下：

const paymentMethodData = {
  supportedMethods: "https://apple.com/apple-pay",
  data: {
    version: 3,
    merchantCapabilities: [
      "supports3DS",
      "supportsInstantFundsOut"  // 启用即时转出
    ],
    // ...其他配置
  }
};

const paymentDetails = {
  total: { label: "Transfer", amount: "100.00" }
};

const paymentOptions = {
  requestShipping: false  // 资金转出不涉及物流
};

const paymentRequest = {
  paymentMethodData: [paymentMethodData],
  paymentDetails: paymentDetails,
  paymentOptions: paymentOptions,
  modifiers: [{
    additionalLineItems: [
      { label: "Total deduction", amount: "100.00" },
      { label: "Instant transfer fee", amount: "1.50", type: "instantFundsOutFee" },
      { label: "Transfer to card", amount: "98.50", type: "disbursement" }
    ],
    disbursementRequest: {
      requiredRecipientContactFields: ["email", "name"]
    }
  }]
};

关键点：

  • supports3DS 是基本能力要求，supportsInstantFundsOut 用于启用即时转出并声明手续费。
  • requestShipping 必须设为 false，因为资金转出不涉及实物配送。
  • disbursementRequest 对象放在 modifiers 里，即使不需要 requiredRecipientContactFields，空对象也必须存在。
  • additionalLineItems 包含三项：扣款总额、即时转出手续费（type: "instantFundsOutFee"，即使免费也必须存在并设金额为零）、实际到账金额（type: "disbursement"）。

错误处理方面，ApplePayError 新增第四个字段指定错误关联的交易类型（08:32）。卡片不支持转出时用 unsupportedCard，收件人联系信息有误时用 recipientContactInvalid。

Merchant Category Code（09:02）

在 payment request 中指定商户类别代码后，支付界面会只展示支持该类别的卡片，减少交易失败。MCC 遵循 ISO 79450 标准，具体代码可向你的支付处理商查询。

Wallet 票务改版（09:56）

NFC 活动门票获得新视觉布局的前提条件：

  1. pass.json 提供必需的语义标签数据（Semantic Tags），让系统理解票面数据的含义。
  2. 在 pass.json 中指定 preferredStyle 为 posterEventTicket（新样式）或 eventTicket（旧样式），可排优先级。
  3. Pass 必须签名 NFC entitlement，持票人才能刷手机入场。

新的 pass bundle 资产：除了原有的 icon、logo、background，新增了 artwork（活动主视觉，旧 OS 会回退用 strip 图片）和 secondaryLogo（显示在 footer 区域）。

票面布局：顶部是活动 logo + 日期时间，中间是 artwork 大图，底部 footer 展示座位信息（最多 4 个字段）。多日活动（如音乐节）可提供 relevantTimeInterval 替代单日日期。无固定座位时显示 admission level（如 General Admission）。

Event Guide（13:29）：票面下方新增地图跳转入口和 Event Guide。Guide 内包含：快捷操作链接（点餐、买周边等）、天气预报、场馆详情（含地图和排队标签）、音乐播放列表。这些内容由 pass.json 中的语义标签 URL、经纬度坐标、performerNames / artistIDs 驱动。

Live Activity 自动启动（16:38）：只要 pass.json 里填好了语义标签数据，票会在最相关的时间自动在 iPhone 和 Apple Watch 上启动 Live Activity，展示入场和座位信息。

核心启发

  • 做什么：电商网站升级 Apple Pay JS SDK 到 1.2.0+ 并替换 CSS 按钮为 SDK 组件，让非 Safari 用户也能看到 Apple Pay 按钮。为什么值得做：覆盖 Chrome、Firefox 等非 Safari 浏览器用户，直接提升结账转化率，改动量极小（两个文件改动）。怎么开始：在 HTML <head> 引入 SDK，替换按钮实现，用 applePayCapabilities() 替代浏览器嗅探逻辑。

  • 做什么：在 web 端接入 Funds Transfer（资金转出）能力，让用户从 app 内账户提现到绑定的银行卡。为什么值得做：钱包类、电商余额类产品一直缺少 web 端的提现入口，用户必须打开 app 操作，现在可以在任何设备的浏览器上完成。怎么开始：在 payment request 的 modifiers 中加入 disbursementRequest 对象，merchantCapabilities 加入 supports3DS（即时转出加 supportsInstantFundsOut），requestShipping 设为 false。

  • 做什么：在 payment request 中指定 Merchant Category Code。为什么值得做：支付界面会自动过滤不支持该类别的卡片，降低因卡片限制导致的交易失败率，尤其对特殊行业的商户有直接帮助。怎么开始：向支付处理商确认你的 MCC，在 payment request 数据中添加对应代码。

  • 做什么：为活动的 NFC 门票 pass 添加语义标签和新视觉样式。为什么值得做：新样式票面信息更清晰（座位信息集中在 footer），Event Guide 聚合了天气、地图、快捷操作，Live Activity 自动启动让用户锁屏即可看到入场信息——整个入场体验从翻找票面变成抬手可见。怎么开始：在 pass.json 中填入语义标签数据，设置 preferredStyle: "posterEventTicket"，添加 artwork 和 secondaryLogo 资产，保留 primary/secondary/auxiliary fields 兼容旧 OS。

关联 Session

评论

GitHub Issues · utterances