CODEWITHSUNDEEP
javascriptgoogle-paypayment-request-api
Soham Bhattacharjee
Soham Bhattacharjee

Reputation: 94

Google Pay (via Payment Request API) - canMakePayment() does not resolve

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/

Upvotes: 1

Views: 1551

Answers (1)

Danyao Wang
Danyao Wang

Reputation: 21

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.

Upvotes: 2

Related Questions