1

I’ve been following this link as a guide for the implementation, and the official W3C guide.

Here’s my logic to display a Google Pay button on our site:

  1. Check if window.PayentRequest is available, and if yes, then:
  2. Build methodData, paymentDetails and paymentOptions. Create a new PaymentRequest object with these.
  3. Call paymentRequest.canMakePayment().then((result)=>{ //if result is true, display the GPay the button }).catch(()=>{}}
  4. When the button shows up, the onClick handler creates a new PaymentRequest object with methodData, paymentDetails and paymentOptions and calls .show()

Our application is in React, and I’m doing step 1 - 3 of this in componentDidMount. For most cases, this works perfectly – the page finishes loading, it checks if PaymentRequest is available and PaymentMethod is supported, and then sets the state to display the Google Pay button, and the click triggers the browser’s native payment sheet.

Here’s the problem I’ve been trying to solve:

On Google Chrome (v 72.0.3626.109) (both on desktop and mobile), the GooglePay button sometimes does not show up when I navigate to the page, and only shows up when I refresh a couple of times. For the cases where it does not show up, from the logs, I’ve seen that the canMakePayment method does not resolve at all – it does not go into then, nor catch. I am not getting where it might be throwing an exception, and where that exception is bubbling to, or why it is failing silently.

Any insight would be helpful – if canMakePayment() returns a promise, why and when would it not resolve? Where do I check for errors?

Here's a fiddle of what I'm doing - and I could replicate the issue on this fiddle as well- https://jsfiddle.net/soham_scratchpad/bzsyrjaf/5/

Soham Bhattacharjee
  • 94
  • 6

1 Answers1

2

What should one be looking for in your fiddle? I tried it on desktop and it always displays the "Show Payment Button" text, which seems to indicate that canMakePayment() resolved to true.

In Chrome's implementation, canMakePayment() can either resolve to a boolean value, or throw a number of exceptions, according to the spec. If you have both .then and .catch handlers, one of them should always trigger.

If not, it may be a bug in Chrome. It would be helpful if you can file a bug report here with reproduction steps, and use Blink>Payments as component.

Danyao Wang
  • 21
  • 2
  • First of all, thanks for checking it out. I was able to replicate the issue in the fiddle, but it was very rare, sorry if it does not convey the issue correctly. On my web page, I see the issue more consistently. However, I have other payment solutions on my webpage, like paypal and visa checkout, which are injecting their own script and calling the PaymentRequest.canMakePayment. I'm thinking that there's a race condition that's preventing my button to show up (canMakePayment not resolving/ throwing DOMException). Still working on it, will update here. – Soham Bhattacharjee Mar 11 '19 at 21:05
  • @SohamBhattacharjee any updates on this yet? – Shiraaz Jan 05 '23 at 18:50