javascript - Google Pay(通过付款请求 API)- canMakePayment() 无法解析

Question

我一直在关注这个link作为实现指南，官方W3C guide .

以下是我在网站上显示 Google Pay 按钮的逻辑:

1. 检查是否 window.PayentRequest可用，如果是，则:
2. 构建 methodData、 paymentDetails 和 paymentOptions。使用这些创建一个新的 PaymentRequest 对象。
3. 调用 paymentRequest.canMakePayment().then((result)=>{ //if result is true, display the GPay the button }).catch(()=>{}}
4. 当按钮显示时，onClick 处理程序会创建一个新的 PaymentRequest 对象，其中包含 methodData、 paymentDetails 和 paymentOptions 并调用 .show()

我们的应用程序位于 React 中，我正在 componentDidMount 中执行步骤 1 - 3。在大多数情况下，这工作得很好 - 页面完成加载，它检查 PaymentRequest 是否可用以及 PaymentMethod 是否受支持，然后设置状态以显示 Google Pay 按钮，并且点击会触发浏览器的 native 付款表。

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

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

任何见解都会有所帮助 - 如果 canMakePayment()返回一个 promise ，为什么以及什么时候它不会解决？我在哪里检查错误？

这是我正在做的事情的 fiddle - 我也可以在这个 fiddle 上复制这个问题 - https://jsfiddle.net/soham_scratchpad/bzsyrjaf/5/

Answer 1

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

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

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