[Wallets] Display payment declines on the checkout and re-enable the Place order button after closing the modal

[james-allan]

Fixes #3168

Changes proposed in this Pull Request:

This PR fixes 2 issues with Wallet payment methods (Cash App and WeChat).

1. If you close the QR code modal on the Block checkout, the Place order button remains disabled and the customer would need to refresh the page to bring it back.
2. If you fail the payment, you're redirected to the order received page rather than being left on the checkout.

With this PR if you fail the wallet payment it will now leave you on the checkout and display the error received from Stripe. If you close the modal, the block checkout is reinitialised so you can reattempt payment.

Testing instructions

1. As a merchant, enable WeChat and Cash App.
2. Create a Checkout Block page, if you don't have one already.
3. As a shopper, add a product to the cart and go to the Block Checkout page
4. Select WeChat or Cash App as the payment method
5. Click on Place Order
6. Close the modal without proceeding with the payment
   7. On develop the Place Order button remains disabled. It's not possible to place the order until you reload the page.
   8. On this branch the place order button should be ready to go again.

develop	This branch

1. As a shopper, add a product to the cart and go to the Block Checkout page
2. Select WeChat or Cash App as the payment method
3. Click on Place Order
4. Scan the QR code on your mobile device.
5. At Stripe click the Fail test payment button.
   • On develop you would be redirected to the order received page. Where you would need to re-navigate to the checkout to reattempt payment.
   • On this branch you should receive the failed notice on the checkout.

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Added changelog entry in both changelog.txt and readme.txt (or does not apply)
• Tested on mobile (or does not apply)

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)

[james-allan]

This branch uses a number of functions marked as internal. I'm not sure if that's not a good idea but this was the only way I could get the payment form to unblock and for the payment elements to be reusable.

[diegocurbelo]

It works as described, but I agree the internal functions are not ideal... maybe we can get some guidance from @woocommerce/rubik?

[senadir]

I'm struggling to understand this, what would cause this flow to trigger? a failed express payment?

[james-allan]

I'm struggling to understand this, what would cause this flow to trigger?

So the set up is a little unorthodox.

When you click the place order button, the process payment request on the server responds with a redirect URL that triggers a modal to be shown.

Wechat.mov

When you close that modal, or if payment fails (and Stripe auto close the modal) we needed to reinit the checkout because it was stuck in the "complete" status from the previous request. This code is essentially doing that.

1. We need to set the URL to null because otherwise calling __internalSetIdle() would cause WC core to redirect the "currentURL" which was the last URL response. I've lost the copy of the stacktrace I had that indicated this but let me know if you want it I should be able to find it again.
2. I then set the status to idle so the checkout can be resubmitted. Without this the checkout remained completed and the place order button was disabled.

So, this function is called when the modal is closed so the customer can reattempt checkout.

[diegocurbelo]

Thanks for working on this @james-allan.

I found a problem with reading window.wc.wcBlocksData in the utils.js... getting the constants after checking wcSettings.wcBlocksConfig in each function seems like the easiest solution 🤷🏼

[diegocurbelo]

Thanks @james-allan... it works perfectly now 🚢