The Google Pay option in the UPE Element doesn't work due to the delay after the user gesture #2707
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.
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:
Replication steps:
Something went wrong. Unable to show Google Pay. Please choose a different payment method and try again.
and an error in the browser console sayingUncaught 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.
The text was updated successfully, but these errors were encountered: