我一直遵循此link作为实施指南以及官方的W3C guide

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


检查window.PayentRequest是否可用,如果是,则:
生成methodData,paymentDetails和paymentOptions。使用这些创建一个新的PaymentRequest对象。
致电paymentRequest.canMakePayment().then((result)=>{ //if result is true, display the GPay the button }).catch(()=>{}}
当按钮显示时,onClick处理程序将使用methodData,paymentDetails和paymentOptions创建一个新的PaymentRequest对象,并调用.show()


我们的应用程序位于React中,而我正在componentDidMount中执行步骤1-3。在大多数情况下,这可以完美地完成工作–该页面完成加载,检查PaymentRequest是否可用并且是否支持PaymentMethod,然后将状态设置为显示Google Pay按钮,然后单击触发浏览器的本机付款表。

这是我一直在努力解决的问题:

在Google Chrome浏览器(v 72​​.0.3626.109)(在台式机和移动设备上)上,当我导航到页面时,有时不会显示GooglePay按钮,而在刷新几次后才显示。
对于未显示的情况,从日志中可以看到canMakePayment方法根本无法解析-它不会进入thencatch。我不知道它可能会在哪里引发异常,该异常正在冒泡的地方,也不知道它为什么会静默失败。

任何见解都将有所帮助–如果canMakePayment()返回承诺,为什么以及何时无法解决?在哪里检查错误?

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

最佳答案

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

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

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

10-08 07:05