Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The Google Pay option in the UPE Element doesn't work due to the delay after the user gesture #2707

Open
a-danae opened this issue Sep 19, 2023 · 4 comments · May be fixed by #3655
Open

The Google Pay option in the UPE Element doesn't work due to the delay after the user gesture #2707

a-danae opened this issue Sep 19, 2023 · 4 comments · May be fixed by #3655
Labels
component: payment request buttons Issues related to Payment Request Buttons - e.g. Apple Pay, Google Pay priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. type: bug The issue is a confirmed bug.

Comments

@a-danae
Copy link
Contributor

a-danae commented Sep 19, 2023

Describe the bug

The Google Pay UPE element (and likely Apple Pay too) fails to process the payment.

After investigation, this is happening due to the delay between the user gesture and the triggering of the wallet's modal.

To Reproduce
Solve a higher-level issue:

  • Go to this line and add the following. Wallets are not payment methods per the Payment Intent API. They will show when the Payment Intent has the card payment method. Ref
if ( in_array( $selected_upe_payment_type, [ 'google_pay', 'apple_pay' ], true ) ) {
	$selected_upe_payment_type = 'card';
}

Replication steps:

  • Enable UPE
  • Open the store in Google Chrome with a user that has a card associated with it
  • Go to a checkout page using the Block checkout
  • Under "Payment options", select "Pay with credit card / debit card"
  • Click on "Google Pay"
  • Click on "Place Order"
  • Notice there's an error in the checkout page saying Something went wrong. Unable to show Google Pay. Please choose a different payment method and try again. and an error in the browser console saying Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation.

Expected behavior
The payment must be processed successfully when selecting Google Pay.

Screenshots

WesvnE.mp4

Additional context
This happens because the wallet’s payment modal must be triggered soon after a user gesture, and we need to run some API requests before the modal is triggered. In some cases, these requests delay displaying the modal longer than what’s allowed by the delegation’s threshold, thus triggering this error.

We’d need to reduce that delay to solve this problem. This likely means moving the API requests before the modal is triggered since we can’t control the time until the API responds. This would deserve a spike because it may or may not be feasible.

You can comment out this request for testing to make the button work in the block checkout. It's worth noting that this is just for testing and isn't an actual solution. There are other scenarios where this problem cannot be solved by commenting out a request.

@wpniall
Copy link

wpniall commented Nov 8, 2023

Reported in 7213708-zen

@WillBrubaker
Copy link
Contributor

in 7353108-zen, the user has alerted us that:

when using this button a coupon does not work properly

Can testing with a coupon be added to the testing instructions when a fix for this is made?

@MattRaynerDBS
Copy link

It's coming up to a year since this issue has been opened, any idea on when or if this will be fixed?

@diegocurbelo diegocurbelo added the type: bug The issue is a confirmed bug. label Sep 24, 2024
@Mayisha Mayisha added the component: payment request buttons Issues related to Payment Request Buttons - e.g. Apple Pay, Google Pay label Nov 25, 2024
@diegocurbelo diegocurbelo added the priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. label Nov 27, 2024
@wjrosa wjrosa self-assigned this Dec 10, 2024
@wjrosa wjrosa linked a pull request Dec 13, 2024 that will close this issue
6 tasks
@wjrosa wjrosa added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Dec 20, 2024
@wjrosa
Copy link
Contributor

wjrosa commented Dec 30, 2024

This issue evolved into the integration of Google Pay as a new wallet payment method (apart from ECE). This should move forward with the upcoming SPE/DPE project. Flagged as blocked for now.

@wjrosa wjrosa removed their assignment Dec 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: payment request buttons Issues related to Payment Request Buttons - e.g. Apple Pay, Google Pay priority: high The issue/PR is high priority—it affects lots of customers substantially, but not critically. status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants