Google Pay pop-up breaks for non Chromium browsers on integration domain site

[jocmp]

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to reverb.com using a browser that does not support the Chromium dialog such as Safari or Firefox
2. Add an item to your cart, click to go to checkout
3. Select Google Pay
4. See the following pop-up. In the console the following error is presented

{
  "statusCode":"DEVELOPER_ERROR",
  "errorCode":2,
  "statusMessage":"Redirect render mode is not supported."
}

Notes:

• The pop-up works as expected in the Test environment, breaks in Production.
• The Chromium payment sheet also works as expected in Chrome or Edge.

Expected behavior: The browser pop-up works as with other eComm sites like etsy.com

Screenshots

Component information:

• Component
  • [x] React component (@google-pay/button-react)
  • [ ] Custom element (@google-pay/button-element)
  • [ ] Angular component (@google-pay/button-angular)

[dmengelt]

@jocmp thanks for reporting this. we will look into it

[dmengelt]

@jocmp is there a way for you to do a simple reproducer on something like stackblizt.com?

[jocmp]

@dmengelt Sure thing. Here's a reproduction of the data Reverb sends to the Google Pay button: https://stackblitz.com/edit/react-ts-9tm2tr. The demo works for me on both Chrome and Firefox for the Test environment.

Firefox screenshot

I discovered that this issue is not based on environment. The "To make this purchase..." error also appears on Firefox for Test and Production reverb.com environments. I was able to reproduce that on Reverb's public sandbox site - https://sandbox.reverb.com - which is a test environment for Google Pay and uses an Adyen Test environment as well for payment processing. A full video of that is shown below for Firefox and Chrome.

1. Visit a test listing https://sandbox.reverb.com/item/2208595-a-lane-in-headingley-leeds
2. Open the "Buy Now" dialog
3. Click the "GPay" button

Firefox (does not work for Test or Production)

https://github.com/google-pay/google-pay-button/assets/9521010/efb2ceeb-178b-4805-9f94-26e0e6b30d2c

Chrome (works in all environments)

https://github.com/google-pay/google-pay-button/assets/9521010/aad1fbef-f2b0-4956-bc10-5c67339bdad8

Firefox works for me in the Test environment so long as the domain does not fall under reverb.com.

I have two questions

• Is there something misconfigured with the reverb.com domain registered and approved by the Google Pay API via the business console?
• Is there a general answer to what the "Redirect render mode is not supported." error means? That might help resolve the issue at hand.

Let me know what you think!

[dmengelt]

Ah yeah I meant a reproducer to see the "To make this purchase..." error 😉 Your stackblitz demo works on all browsers for me.

To answer your two questions:

• domain configuration for reverb.com looks good
• We support Google Pay in a payment handler window (Chromium browsers) and in pop-up mode. Unfortunately we don't know yet why in your scenario (for non Chromium browsers) there is a popup but we think its redirect mode and therefore show an error message.

We will continue investigating.

[jocmp]

hey @dmengelt - just checking to see if you've found anything. We're still experiencing this issue.

[dmengelt]

We are suspecting having react router for checkout is causing the hosting page to be treated as redirect instead of "pop-up" on our side. We are still investigating though.

[dmengelt]

@jocmp for some reason window.opener is not defined for reverb.com. We use this property to detect if we can go "pop-up" mode.

[dmengelt]

@jocmp could you try to remove rel='noopener' for your payment method form and let me know if the behaviour changes?

[jocmp]

Thanks @dmengelt, the opener policy was the key. Reverb had a Cross-Origin-Opener-Policy set to "same-origin" to prevent cross-site attacks. Changing this to "same-origin-allow-popups" resolved the issue for Firefox and Safari.