Google Pay（通过付款请求 API）- canMakePayment() 无法解决

Question

我一直在关注这个link 作为实施指南，以及官方的W3C guide。

这是我在我们的网站上显示 Google Pay 按钮的逻辑：

1. 检查window.PayentRequest是否可用，如果是，则：
2. 构建方法数据、paymentDetails 和 paymentOptions。使用这些创建一个新的 PaymentRequest 对象。
3. 致电paymentRequest.canMakePayment().then((result)=>{ //if result is true, display the GPay the button }).catch(()=>{}}
4. 当按钮出现时，onClick 处理程序创建一个带有 methodData、paymentDetails 和 paymentOptions 的新 PaymentRequest 对象并调用.show()

我们的应用程序在 React 中，我正在 componentDidMount 中执行第 1-3 步。在大多数情况下，这可以完美运行——页面完成加载，它检查 PaymentRequest 是否可用以及 PaymentMethod 是否支持，然后将状态设置为显示 Google Pay 按钮，点击触发浏览器的原生支付表。

这是我一直试图解决的问题：

在 Google Chrome (v 72.0.3626.109)（桌面版和移动版）上，当我导航到页面时，GooglePay 按钮有时不会显示，只有在我刷新几次时才会显示。 对于它没有出现的情况，从日志中，我看到 canMakePayment 方法根本没有解决——它没有进入then，也没有进入catch。我不知道它可能会在哪里引发异常，以及该异常在哪里冒泡，或者为什么它会静默失败。

任何见解都会有所帮助——如果canMakePayment() 返回一个承诺，为什么以及何时无法解决？在哪里检查错误？

这是我正在做的一个小提琴 - 我也可以在这个小提琴上复制这个问题 - https://jsfiddle.net/soham_scratchpad/bzsyrjaf/5/

Answer 1

你应该在你的小提琴中寻找什么？我在桌面上尝试过，它总是显示“显示付款按钮”文本，这似乎表明 canMakePayment() 解析为 true。

根据spec，在 Chrome 的实现中，canMakePayment() 可以解析为布尔值，也可以抛出许多异常。如果您同时拥有 .then 和 .catch 处理程序，则应始终触发其中之一。

如果不是，则可能是 Chrome 中的错误。如果您可以提交带有重现步骤的错误报告 here 并使用 Blink>Payments 作为组件，将会很有帮助。