Amazon Pay ECE: add payment flow using confirmation tokens

[annemirasol]

Fixes #3737

Changes proposed in this Pull Request:

To set the stage for Amazon Pay, we need to introduce a payment flow that uses confirmation tokens instead of manually created payment methods.

Since Amazon Pay does not support paymentMethodCreation: manual, we cannot use the same payment element to create all express checkout buttons.

This PR makes the following changes:

• We add a "confirmation token" branch to deferred intent payment processing
• For product page, classic cart, classic checkout and Pay-for-Order pages, we split the express checkout payment types: creating one payment element for each type.
  • This is already our approach for block cart and block checkout.
  • As we are splitting the express payment types (and as such, we have to mount them in children divs under the main div), the width/layout for the express payment buttons have slightly changed. See comments for the before and after.

Testing instructions

1. Purchase items using ECE on the different pages that we display them: product page, classic/block checkout, classic/block cart, and Pay-for-Order page. Purchases should behave as expected.
   • As all of our express payment types are set to use manual payment method creation, this is a regression check. Everything should behave the same way as before.
2. Purchase products using non-express payment methods, e.g. credit card, Klarna. Purchases should behave as expected.
3. To test the newly-added confirmation tokens flow, uncomment https://github.com/woocommerce/woocommerce-gateway-stripe/pull/3741/files#r1927748266, which will set Google Pay to use the new flow. Do not forget to rebuild your source afterwards.
4. With Google Pay set to use confirmation tokens, purchase items using Google Pay on the different pages where we display them.
5. In wp-admin, check that the orders get set to "Processing" or "Completed". With confirmation tokens, you may have to wait a few minutes (around 3-5 mins) for it.
6. Test confirmation token flow + manual capture:
   • In Stripe Settings > Transaction Preferences, turn on "capture later".
   • Verify that you can purchase items without any problem.
   • Similar to automatic capture, it may take a few minutes for the order status to change from "Pending payment" to "On hold".
   • Change the status to "Processing" to capture the payment.

---

• 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)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[annemirasol]

👆 Uncomment this section to test the confirmation token flow, using Google Pay.

[annemirasol]

This PR changes the way we render the express payment buttons in non-block pages: they are now rendered separately to allow for elements with different payment configs.

As such, the way the buttons look have slightly changed. LMK if you see any problems with this, or if you can think of a way to avoid surprising our merchants with a potential layout change.

Before	After

[wjrosa]

👋 hi! It looks like changelog.txt and readme.txt needs to be updated

[wjrosa]

This PR changes the way we render the express payment buttons in non-block pages: they are now rendered separately to allow for elements with different payment configs.

As such, the way the buttons look have slightly changed. LMK if you see any problems with this, or if you can think of a way to avoid surprising our merchants with a potential layout change.

Before After

I think it is OK for this PR, but we might want to create a new issue to handle this later. Some merchants do complain about these kind of changes.

[wjrosa]

Nice work, Anne! Code is nice and it mostly works as intended:

1. Purchase items using ECE on the different pages that we display them: product page, classic/block checkout, classic/block cart, and Pay-for-Order page. Purchases should behave as expected.

Product page:

Classic checkout:

Block checkout:

Classic cart:

Blocks cart:

Pay for order:

2. Purchase products using non-express payment methods, e.g. credit card, Klarna. Purchases should behave as expected.

4. With Google Pay set to use confirmation tokens, purchase items using Google Pay on the different pages where we display them.
   ❌ I get this on any page after removing that comment

5. In wp-admin, check that the orders get set to "Processing" or "Completed". With confirmation tokens, you may have to wait a few minutes (around 3-5 mins) for it.
   ❌ Not possible to test due the previous error

6. Test confirmation token flow + manual capture:

• Verify that you can purchase items without any problem.
• Change the status to "Processing" to capture the payment.
  ❌ Not possible to test due the previous error

[annemirasol]

With Google Pay set to use confirmation tokens, purchase items using Google Pay on the different pages where we display them.
❌ I get this on any page after removing that comment
Screenshot 2025-01-27 at 11 15 23

Oof 😓, sorry about that. I added a last-minute tweak in 817749a to support manual captures and ended up breaking automatic capture. Fixed in f124d78, and tested for both scenarios!

[wjrosa]

With Google Pay set to use confirmation tokens, purchase items using Google Pay on the different pages where we display them.
❌ I get this on any page after removing that comment
Screenshot 2025-01-27 at 11 15 23

Oof 😓, sorry about that. I added a last-minute tweak in 817749a to support manual captures and ended up breaking automatic capture. Fixed in f124d78, and tested for both scenarios!

Works now! Thanks for fixing the issue 👍