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

[a-danae]

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

https://github.com/woocommerce/woocommerce-gateway-stripe/assets/41606954/e52ec777-5c94-4785-8e68-502066ec40bd

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]

Reported in 7213708-zen

[WillBrubaker]

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]

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