ECE/GooglePay/ApplePay JS error when payment fails from backend

[frosso]

Describe the bug

I observed this both in the non-tokenized and the tokenized ECE.

When the backend fails a payment, we call the paymentFailed( { reason: 'fail' } ) method:

woocommerce-payments/client/express-checkout/blocks/hooks/use-express-checkout.js

Line 49 in cf6d2c1

onConfirmEvent.paymentFailed( { reason: 'fail' } );

woocommerce-payments/client/express-checkout/index.js

Line 109 in cf6d2c1

payment.paymentFailed( { reason: 'fail' } );

When this is triggered, a JS error occurs in the console:

v3/?ver=3.0:1 Uncaught (in promise) IntegrationError: Unexpected call to paymentFailed(). Ensure you are either submitting a payment or calling paymentFailed() once per expressCheckout Element confirm event.
    at v3/?ver=3.0:1:355551
(anonymous) @ v3/?ver=3.0:1
Promise.then
paymentFailed @ v3/?ver=3.0:1
abortPayment @ index.js:109
onConfirmHandler @ event-handlers.js:106
await in onConfirmHandler
eval @ index.js:335
(anonymous) @ v3/?ver=3.0:1
s._emit @ v3/?ver=3.0:1
a._emitEvent @ v3/?ver=3.0:1
N @ v3/?ver=3.0:1
(anonymous) @ v3/?ver=3.0:1
s._emit @ v3/?ver=3.0:1
_handleMessage @ v3/?ver=3.0:1
(anonymous) @ v3/?ver=3.0:1
(anonymous) @ v3/?ver=3.0:1

To Reproduce

1. Modify the backend to fail the payment, or modify the JS to trigger this conditional:

   woocommerce-payments/client/express-checkout/event-handlers.js

   Line 86 in cf6d2c1

• (or, alternatively, use a failed card if you can)

2. Ensure you have GooglePay/ApplePay enabled
3. Navigate to a product page
4. Click on the GooglePay/ApplePay button
5. Attempt to pay
6. JS error appears in the console

Screenshots

The screenshot shows the reCaptcha plugins failing, but I can reproduce it also without said plugin.

Expected behavior

No JS error should appear when a payment fails.
It seems that we're calling paymentFailed() incorrectly.

Additional context

[bborman22]

Hey team! Please add your planning poker estimate with Zenhub @asumaran @cesarcosta99 @lovo-h @rafaelzaleski @reykjalin @ricardo