Apple Pay 支付请求 API 的新特性
自去年四月宣布 WebKit 支持 W3C 支付请求 API 用于 Apple Pay 以来，我们一直努力为该 API 添加更多功能。从支持 Apple Pay 支付方式中的拼音姓名，到 paymentmethodchange 事件和 PaymentResponse.retry() 等新标准功能，WebKit 的支付请求实现现在比以往任何时候都更加强大。您以前可以通过 Apple Pay JS API 完成的任何操作，现在都可以直接使用 Apple Pay 支付方式通过支付请求 API 完成。
让我们仔细看看过去一年中我们对支付请求所做的一些改进。
paymentmethodchange 事件
当用户在 Apple Pay 支付单中选择一张卡片时，WebKit 现在会向您的 PaymentRequest 对象分派 paymentmethodchange 事件。WebKit 会用 ApplePayPaymentMethod 字典填充事件的 methodDetails 属性，您可以使用它来确定卡片信息，例如其类型。
监听 paymentmethodchange 是可选的，但如果您监听，请务必使用更新后的支付详情的 Promise 调用事件的 updateWith() 方法。
const request = new PaymentRequest(...);
request.onpaymentmethodchange = (event) => {
// Compute new details based on event.methodDetails
const detailsUpdatePromise = computeDetails(event.methodDetails);
event.updateWith(detailsUpdatePromise);
};
无论您是否监听 paymentmethodchange 事件，WebKit 都继续支持支付详情 modifiers，这是一种根据用户选择的卡片来改变支付详情的声明式方法。有关修饰符的更多信息，请参阅去年的博客文章。
请求拼音姓名
Apple Pay 支付方式现在支持请求客户姓名的拼音拼写，作为送货和账单联系信息的一部分。以下是一个 Apple Pay 支付方式，它请求包含本地化姓名、拼音姓名和邮政地址的送货联系人信息。
const applePayMethod = {
supportedMethods: "https://apple.com/apple-pay",
data: {
...,
requiredShippingContactFields: ["name", "phoneticName", "postalAddress"],
},
};
当您的客户授权支付时，WebKit 会将拼音姓名作为 ApplePayPayment 字典的一部分提供，该字典存储在 PaymentResponse 的 details 属性中。
const request = new PaymentRequest([applePayMethod], ...);
request.show().then((response) => {
const shippingContact = response.details.shippingContact;
const phoneticFamilyName = shippingContact.phoneticFamilyName;
const phoneticGivenName = shippingContact.phoneticGivenName;
});
报告错误
在处理联系信息时，您可能会遇到需要客户解决才能继续交易的错误。常见的例子包括无效地址、无法提供服务的地址和缺失的联系信息。
为了您可以向客户报告这些错误，WebKit 现在支持 PaymentDetailsUpdate 字典中支付请求的细粒度错误报告功能。您可以为送货地址属性的错误指定 shippingAddressErrors，为姓名、电子邮件地址和电话号码的错误指定 payerErrors，为所选支付方式特有的错误指定 paymentMethodErrors。Apple Pay 支付方式将 paymentMethodErrors 视为一系列 ApplePayError 对象。
以下是您如何报告邮政编码无效的错误
const request = new PaymentRequest([applePayMethod], details, { requestShipping: true });
request.onshippingaddresschange = (event) => {
// Compute new details based on shippingAddress
const detailsUpdate = computeDetails(request.shippingAddress);
// Check for an invalid postal code
if (!isValid(request.shippingAddress.postalCode))
detailsUpdate.shippingAddressErrors = { postalCode: "Invalid postal code" };
event.updateWith(detailsUpdate);
};
当您报告错误时，WebKit 会在 Apple Pay 支付单中显示它们，并提示您的客户进行更正——或许是通过编辑他们的送货地址或从已存储地址列表中选择。这是我们在 iPhone 上指定的送货地址错误的样子。
当您的客户点击错误的送货地址时，Apple Pay 页面会显示您的自定义错误消息。如果他们决定编辑地址，您标记为错误的字段（本例中为 postalCode）将被高亮显示，以帮助他们进行更正。
一旦用户完成更正，WebKit 会再次触发 shippingaddresschange 事件。如果您对更正满意，可以不指定错误地再次调用 updateWith() 方法来继续交易。
在处理 shippingaddresschange 中的错误时，请记住，WebKit 在支付授权前会修订送货联系人信息的某些部分。规则因国家/地区而异，但总的来说，WebKit 只显示计算税费和运费所需的联系信息。一旦客户授权支付，WebKit 会显示所有请求的联系信息。
重试授权
虽然在处理 shippingaddresschange 等事件时可以检测到许多错误，但上面提到的修订规则意味着某些错误只能在用户授权支付后才能检测到。例如，您可能需要一个电子邮件地址来发送购买确认，但直到授权后才发现客户没有提供有效的电子邮件地址。
为了处理这些情况，WebKit 现在实现了 PaymentResponse 的 retry() 方法，允许您在纠正错误后要求用户重试支付。
当您在 PaymentResponse 中检测到错误时，您可以使用 PaymentValidationErrors 字典调用 retry()。与 PaymentDetailsUpdate 中一样，您可以指定 shippingAddress 错误、payer 错误和 paymentMethod 错误。当您调用 retry() 时，它会返回一个 Promise，该 Promise 在 PaymentResponse 重新授权后解决。
以下是您如何处理无效电子邮件地址的示例
const handleResponse = (response) => {
if (!isValid(response.payerEmail)) {
response.retry({
payer: { email: "Invalid email address" },
}).then(() => { handleResponse(response) });
return;
}
response.complete("success");
};
const request = new PaymentRequest([applePayMethod], ...);
request.show().then(response => handleResponse(response));
请记住，retry() 用于用户可以更正的错误。如果您检测到致命错误——例如，卡被拒绝或商品已无库存——请使用 'fail' 的 PaymentComplete 值调用 PaymentResponse 的 complete() 方法。Apple Pay 支付单将向用户显示相应的错误，然后自行关闭。
可用性
这些新的支付请求功能从 macOS 上的 Safari 12.1、iOS 12.2 上的 Safari 以及 Safari Technology Preview 开始可用。
反馈
我们已经收到了许多宝贵的开发者反馈，并期待更多您的错误报告和功能请求。如果您在 WebKit 中发现支付请求错误，请在 bugs.webkit.org 报告。在 Twitter 上，您可以通过 @webkit 联系 WebKit 团队，或通过 @jonathandavis 联系我们的网络技术推广者 Jonathan Davis。