Multiple UPE - Checkout can't be completed from the Pay for Order page

[harriswong]

Description

This is one of the TODOs from #3968 (comment).

When we use the poc/upe-instances-multiplied branch, checkout can't be completed from the "Pay for Order page". This error is appearing in the console:

Uncaught (in promise) TypeError: upeComponents is undefined
    _callee$ upe.js:230
    tryCatch runtime.js:63
    invoke runtime.js:293
    defineIteratorMethods runtime.js:118
    Babel 2
    node_modules upe_checkout.js:10985
    node_modules upe_checkout.js:10974
    mountUPEElement upe.js:224
    <anonymous> upe.js:424
    jQuery 13
upe.js:230:6
    Babel 4
    mountUPEElement upe.js:224
    <anonymous> upe.js:424
    jQuery 13

This seems to be related to the change in the way the payment method type is handled.

This ticket is to find out what causes the error and to resolve it.

Acceptance Criteria

• fix the error
• changes made should be merged into poc/upe-instances-multiplied, not develop.

[harriswong]

If I go to http://localhost:8082/my-account/orders/, then another error is:

Uncaught (in promise) IntegrationError: In order to create a payment element, you must pass a valid PaymentIntent or SetupIntent client secret when creating the Elements group.

  e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
    at Yn (?ver=3.0:1:222954)
    at rr (?ver=3.0:1:230188)
    at new n (?ver=3.0:1:234345)
    at e.<anonymous> (?ver=3.0:1:237627)
    at e.create (?ver=3.0:1:132577)
    at _callee$ (upe.js:344:25)
    at tryCatch (runtime.js:63:16)
    at Generator.invoke [as _invoke] (runtime.js:293:1)
    at Generator.throw (runtime.js:118:1)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)

** updates **
After running npm i, the error disappeared.

[harriswong]

Merged into poc/upe-instances-multiplied. Closing

[csmcneill]

Reopening this issue as I can reproduce this issue.

Steps to Reproduce

1. Enable UPE.
2. Disable multi-currency (as this can allow for the order to be paid with a different currency depending on geolocation settings).
3. Set the site's default currency to EUR.
4. Create a manual order for a guest customer.
5. Navigate to the pay for order page in an incognito browser window (to avoid loading pre-saved location/payment information)
6. The payment fields run into issues loading with the following errors: An error was encountered when preparing the payment form. Please try again later. and We're not able to process this request. Please refresh the page and try again.
7. Check the console for an error.
8. Refresh the page.
9. The card element doesn't load, but there are no errors displayed on the page.
10. Check the console again for an error. The error is a bit different this time.

This was reported in 6342851-zen. They are based in the UK, and have EUR as the site's default currency, and have all APMs enabled.

Some discussion in p1685396808593709/1685368896.490399-slack-CGGCLBN58 where we determined that this isn't related to any sort of fraud prevention measures.

Screenshots

Their site:

My site:

Console Errors

So that folks can more easily determine if they are affected by the issue, I'm adding the console error here in plaintext for easier searching.

Here is the console error when the page first loads:

Uncaught (in promise) IntegrationError: In order to create a payment element, you must pass a clientSecret or mode when creating the Elements group.

  e.g. stripe.elements({clientSecret: "{{CLIENT_SECRET}}"})
    at oo (?ver=3.0:1:234991)
    at mi (?ver=3.0:1:279270)
    at new t (?ver=3.0:1:284439)
    at t.<anonymous> (?ver=3.0:1:295453)
    at t.create (?ver=3.0:1:89823)
    at C (??wp-content/plugins/woocommerce/assets/js/frontend/tokenization-form.min.js,wp-content/plugins/woocommerce-payments/dist/upe_checkout.js?m=1684329728:2:86567)

And when it is refreshed:

Failed to load resource: the server responded with a status of 429 ()

Workarounds

1. Merchants can disable UPE.
2. Merchant can disable all APMs.
3. Merchants can ask customers to complete the order without using the Pay for Order flow.
4. Merchants can change the default currency to something other than EUR.

[frosso]

Heisenberg to try to validate & investigate this in the next sprint

[frosso]

Validated, this error is not relevant anymore.