TypeError: Cannot read properties of null (reading 'close')

[cristhian-bento]

Describe the bug An error is being thrown by pay.js when opening/closing the Google Pay window several times

To Reproduce:

1. Click on the Google Pay button (like if you want to break it).
2. Close the Google Pay window (try to break it again).
3. Repeat 1 and 2 until you get the error.

Expected behavior We expect it to not fail, so Sentry is not alarming us all the time.

Screenshots

Component information:

• Component
  • [x] React component (@google-pay/button-react)
  • [ ] Custom element (@google-pay/button-element)
  • [ ] Angular component (@google-pay/button-angular)
• Component version (e.g. 1.0.0):

Environment:

• Device (e.g. PC):
• OS (e.g. Windows 10):
• Browser (e.g. Edge 111.0.1661)
• Country/region: USA

Additional context It also happens in many other devices and OS/Browsers. E.g Samsung S21 Ultra / Samsung Mobile browser

[dmengelt]

@cristhian-bento thanks for reporting this. we will take a closer look and report back.

[johnratignier]

Hey, we still have this issue raising a lot of time, any news about fix?

[dmengelt]

@johnratignier just checked today 😉 I should be able to give you an update by the end of the week

[dmengelt]

@johnratignier the issue is on our list. so sorry for not being able to give you more details for now...

[dmengelt]

@johnratignier do you still see this issue? if yes, are you able to reproduce this without Sentry?

[johnratignier]

@johnratignier do you still see this issue? if yes, are you able to reproduce this without Sentry?

In which version (we are still in v3.0.9 for now)? And yes I managed to reproduce it when I reported, didn't try again since

[cristhian-bento]

just to add, we are still seeing this issue (as you can see, it started 8 months ago):

[dmengelt]

testing with 3.0.9 is fine. do you also see the issue here: https://google-pay-react-tbnfni.stackblitz.io/

[cristhian-bento]

I've just tested in Safari:

Not the same error, but same issue after following my steps to reproduce.

Safari Version 15.4 (17613.1.17.1.13)

[sergey-navrotskiy]

We've got this error too. But in other case. We using @google-pay/button-element & Vue. Page with GooglePayButton openes in iframe & this error fired when iframe closed (all browsers, macos)

[dmengelt]

@sergey-navrotskiy are you able to create a reproducer and share it here?

[sergey-navrotskiy]

@dmengelt sorry

We've turn off google pay on production server and I can`t checked it now. On staging server now this error is absent – so maybe its fixed. I will wrote if this error appears.

[dmengelt]

@cristhian-bento / @johnratignier we deployed a fix for this error. Could you check again?

[johnratignier]

@cristhian-bento / @johnratignier we deployed a fix for this error. Could you check again?

Does it need a new version? Seems only one error in the past 24h, 15h ago. And 15 occurences in the past 7days, that's far less than before, but we also have less trafic

[dmengelt]

@johnratignier No new version needed. The fix is part of pay.js

Seems only one error in the past 24h, 15h ago.

Yeah we deployed the fix around 22:00 Sep 19 GMT+2

[cristhian-bento]

@dmengelt I was not able to manually reproduce it anymore. I will check the logs, but seems fixed. Thanks!

[dmengelt]

@cristhian-bento thanks! please report back after checking the logs.

[cristhian-bento]

kind of weird, I can still see it in Sentry, but only 8 times/day, which I think is acceptable.

[dmengelt]

@cristhian-bento any chance that there is some caching involved?

[sergey-navrotskiy]

@dmengelt, here the reproducer: GooglePayError.zip

The code causing the error: button.addEventListener('loadpaymentdata', event => { location=./3dsv2.html// redirectTo3dsUrl });

[dmengelt]

@sergey-navrotskiy thanks for the reproducer. I believe that your problem is not the same. Also, your code works for me.

Do you maybe want to open a new issue and share the error message? (A screenshot should do it)

[sergey-navrotskiy]

[dmengelt]

@sergey-navrotskiy and you are just clicking on "Show iframe" in your example and then complete a Google Pay transaction in order to get this error?

[sergey-navrotskiy]

@dmengelt

https://github.com/google-pay/google-pay-button/assets/1263960/f6f461e0-a631-4e99-b91d-47741962fc3e

[dmengelt]

@sergey-navrotskiy can you do another video here please: https://google-pay-custom-element-g8nuum.stackblitz.io

Please share the video even if you don't see the error.

[dmengelt]

Another question @sergey-navrotskiy: You load your iframe content from the same domain as your main page right? So everything is on localhost:63342?

[sergey-navrotskiy]

@dmengelt , I guess I don't have access there (https://google-pay-custom-element-g8nuum.stackblitz.io/)

[dmengelt]

@sergey-navrotskiy you should have access. Its a stackblitz site. Sometimes it has troubles loading...

[dmengelt]

@sergey-navrotskiy please do a video here: https://gpay-live-demo.web.app/

[sergey-navrotskiy]

@dmengelt, there is no error on your page (https://gpay-live-demo.web.app/)

https://github.com/google-pay/google-pay-button/assets/1263960/05bf93c7-8afc-4ab5-9db4-f8e20f8abec3

[dmengelt]

@sergey-navrotskiy thanks. I'm unable to reproduce 😕

Also, I'm wondering why you always see the popup instead of the Payment Request / Payment Handler UI. What browser version are you using? I can see that you have the allowpaymentrequest attribute (you can migrate this to allow="payment *") on your iframe which looks good 👍

[sergey-navrotskiy]

@dmengelt , Apple M2 Pro, MacOs Ventura 13.5.2 (22G91) I`ve got this error in Chrome 117.0.5938.132 (arm64), Safari, FF

I set allow="payment *", but the error still exists

[dmengelt]

@sergey-navrotskiy yeah the allow="payment *" hint was not supposed to fix your issue 😉

Could you send me a screenshot of what you see on this page: https://dmengelt.github.io/gpay-web-tester/pr/

[sergey-navrotskiy]

@dmengelt

[sergey-navrotskiy]

@dmengelt, this screenshot is better ;)

[dmengelt]

Ok it turns out that the error message gets triggered with the following browser settings active:

For Chrome those settings can be found under chrome://settings/payments

If Allow sites to check if you have payment methods saved is turned off, we fallback to the "pop-up" flow and in this scenario we try to close a window on beforeunload if the site navigates away. This window is sometimes not available and therefore this produces the Uncaught TypeError: Cannot read properties of null (reading 'close') error.

We will look into this. Sorry for all the inconvenience.

[dmengelt]

@cristhian-bento / @johnratignier we deployed a second fix. Could you check your Sentry logs once more? The fix is live since ~ 22:00 CET 11. Oct.

[dmengelt]

friendly ping @cristhian-bento / @johnratignier - I would love to close this issue 😉

[johnratignier]

146 occurences the last 30 days but as said, we have far less traffic since the end of the summer. Last issue 2 days ago. I would be 100% sure in the next 2 weeks, but for now looks good :)

[dmengelt]

@johnratignier thank you! alright... please report back in 2 weeks

[dmengelt]

@johnratignier could you do another check?

[johnratignier]

Hi @dmengelt it seems no new error since 11 october, I think can be close! Thanks a lot for the fix! :)

[dmengelt]

@johnratignier nice! thanks for the heads up. closing...