Selecting Apple Pay / Google Pay from the New Checkout Experience payment options fails to take payment

[dominiccarrington]

Describe the bug
When selecting Apple Pay / Google Pay from the new checkout option and checking out, the Apple Pay / Google Pay payment popup comes up. However, when this is passed, the checkout does not continue.

Apple Pay says that the payment was successful but there is no redirect to checkout success page nor does Stripe records the checkout as a success or even an attempt at payment.

To Reproduce
Steps to reproduce the behaviour:

1. Go to checkout with the new checkout experience.
2. Choose Apple Pay / Google Pay from the options
   
3. Checkout, Apple Pay / Google Pay won't report any errors but the checkout process doesn't continue.

Expected behaviour
Checkout to be successful

Environment:

• WordPress Version: 6.1.1
• WooCommerce Version: 7.4.1
• Stripe Plugin Version: 7.1.0 (and 7.2.0)
• Chrome on Windows 111.0.5563.64 / Safari on iPhone: 16.3.1

[dankocrama]

Same problem here any news on this issue all versions of the plugin from 7.0 to 7.2 where tested and all the same problem on multiple website !

[dougaitken]

This seems to happen in both the UPE and the Express Payment button. I test with Google Pay on Chrome desktop and Apple Pay on Safari desktop.

For Google Pay: Tried in test mode and the UPE version fails with this error:

Your request failed. Use a different payment method, or contact us. Learn more [OR-CCSEH-21]

The Express Payment button opens the modal then fails with a small generic error message. For my testing it could be related to my live keys being expired as I tried a live card with the Express Payment button.

Apple Pay, I used UPE and the modal showed success but no redirect to order-received endpoint, no order, draft or otherwise. Only indication was an entry in the Stripe log file:

====Stripe Version: 7.2.0====
====Start Log====
payment_intents request: Array
(
    [amount] => 2000
    [currency] => usd
    [payment_method_types] => Array
        (
            [0] => card
            [1] => link
        )

    [capture_method] => automatic
)

====End Log====

[rashedripon]

6066261-zen

[igorhereira]

6075078-zen

[imodouglas]

6082341-zen
6083139-zen

[imodouglas]

Hi, just checking to see if there is any walkaround for this issue or if there is a specific version that works.

[asumaran]

I got a different error, but it might be related. I'll prepare a quick patch to see if it also fixes this issue. Turns out google_pay is not an option in the upe_checkout_experience_accepted_payments array of accepted payments methods 🤔

Uncaught TypeError: Cannot read properties of undefined (reading 'isReusable')
    at index.js:298:9
    at ?ver=3.0:1:92652
    at Array.forEach (<anonymous>)
    at t._emit (?ver=3.0:1:92593)
    at a._emitEvent (?ver=3.0:1:277293)
    at ?ver=3.0:1:227215
    at ?ver=3.0:1:92850
    at Array.forEach (<anonymous>)
    at t._emit (?ver=3.0:1:92593)
    at e._handleMessage (?ver=3.0:1:309707)

[imodouglas]

6090637-zen

[imodouglas]

6180172-zen

[kaushikasomaiya]

6073013-zen

Merchant reported the below error in console

Full Size: https://d.pr/i/xQ81JH

[imodouglas]

42896303-hc

[imodouglas]

6213939-zen

[xue28]

6254969-zen

[tsetend]

6341151-zen

[fhmomo]

same issue, any solutions?

[segomaster]

also experiencing this issue.

[elementall2]

Any news on this?
We got the same error, in stripe comes back with " The customer has not entered their payment method. "
Wordpress Current version: 6.3.1
Woocommerce Version 8.0.3
Stripe module Version 7.5.0

[a-danae]

👋 Update over here.

There are a couple of errors that are easily solvable:

• The error message in the classic checkout saying Uncaught TypeError: Cannot read properties of undefined (reading 'isReusable')
• The error message in the checkout saying stripe.confirmSetup(): the confirmParams.return_url argument is required unless passing redirect: 'if_required' - With the PHP error PHP Fatal error: Uncaught Error: Call to a member function is_allowed_on_country() on null in /var/www/html/wp-content/plugins/woocommerce-gateway-stripe/includes/payment-methods/class-wc-stripe-upe-payment-gateway.php:577

After solving those, there’s the tricky one:

The error message on the checkout page saying Something went wrong. Unable to show Google Pay. Please choose a different payment method and try again. - With a browser console error saying Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation.

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.

In the meantime, it’d be better to let the Express buttons (those at the top of the checkout page) do the wallets’ work for a similar experience to the non-UPE version, and hide those within the Card payment element (those referenced in the GH issue description) which aren’t working as expected.

I’ve created the following issue to document these findings and prioritize the spike as the backlog allows #2707

[a-danae]

Closing this issue with the following actions:

• New issue created to dive into the underlying problems of the wallets displayed in the UPE Element The Google Pay option in the UPE Element doesn't work due to the delay after the user gesture  #2707
• PR created to prevent the wallets from showing up in the UPE Element while the spike is handled, also making the experience more consistent with the non-UPE version Prevent displaying wallets in the UPE card element #2708

[WillBrubaker]

Heya @a-danae you mention:

There are a couple of errors that are easily solvable:

There's another error message mentioned in #2573 (comment) i.e.

Uncaught (in promise) IntegrationError: You specified "never" for fields.billing_details.name when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.name when calling stripe.confirmPayment(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmPayment().;
construct
@ [native code]:
n
@ https://js.stripe.com/v3/:1
construct
@ [native code]:
@ https://js.stripe.com/v3/:1
t
@ https://js.stripe.com/v3/:1
re
@ https://js.stripe.com/v3/:1
@ https://js.stripe.com/v3/:1
@ https://js.stripe.com/v3/:1
@ https://js.stripe.com/v3/:1

Is that covered in the investigation/fix efforts as well?