google-pay / google-pay-button

Google Pay button - React, Angular, and custom element
Apache License 2.0
256 stars 65 forks source link

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

Closed jocmp closed 9 months ago

jocmp commented 9 months ago

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:

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

Screenshots

Screenshot 2024-02-12 at 5 26 27 PM

Component information:

dmengelt commented 9 months ago

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

dmengelt commented 9 months ago

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

jocmp commented 9 months ago

@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

Screenshot 2024-02-16 at 10 06 01 AM

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

Let me know what you think!

dmengelt commented 9 months ago

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:

We will continue investigating.

jocmp commented 9 months ago

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

dmengelt commented 9 months ago

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 commented 9 months ago

@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 commented 9 months ago

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

jocmp commented 9 months ago

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.