Improve Klarna phone number validation on checkout

[mgascam]

Describe the bug

There's an error in the Klarna app complaining about missing phone number when an order is placed. It only fails when the Legacy UPE is enabled, and the shopper does not fill the phone in the checkout form of the store.

To Reproduce

1. Enable Legacy UPE in the store
2. Mark Phone as optional (via WP Admin > Appearance > Customize > WooCommerce > Checkout)
3. Add items to your order and proceed to checkout
4. Fill all mandatory fields
5. Place order and wait to be redirected to Klarna app.
6. Check the error

Actual behavior

This error is shown:

There has been an error with vour address
Please check the following fields: Phone number

Screenshots

Expected behavior

No errors are thrown and shopper can proceed with Klarna payment.

Additional context

We spotted this error while testing the PR that introduces Klarna as payment method: https://github.com/Automattic/woocommerce-payments/pull/7282#top .

[kalessil]

Ping @dmvrtx to link this with Klarna epic.

[KarlisJ]

I want to note that error also can happen if Klarna doesn't like how the phone is formatted. In my local setup I have US merchant and as a customer I set valid US address but used LV phone number. That triggered the same error. Using valid US phone number removed the error.

Since we don't validate the phone number by the country rules, customers might encounter this error.

[KarlisJ]

Also note that I've replicated this issue on Split and Deferred UPE, not only Legacy

[KarlisJ]

Unable to reproduce using Blocks checkout

[KarlisJ]

Apologies for the spam. A wrap-up of my testing.

There are 2 cases when this error can happen.

1. Using Legacy UPE if the phone field is optional and left empty. For Split and Deferred UPEs, the Klarna redirect allows entering the phone there.
2. Using any UPE if the entered phone doesn't validate against the country. The error message indicates that the problem is with the phone number, and the customer can get back to the store, but we show only the generic We're not able to process this payment. Please try again later. error message.

To address first point, we can probably look at the differences between Legacy and Split/Deferred UPEs, but firstly we should understand if there's even a possibility for merchants to have Klarna with Legacy checkout.

For the second point, there are 3 options, listed from best to worth:

1. Perform phone field validation before redirecting to Klarna
2. Add a proper error message when redirecting back from Klarna with an error
3. Do nothing. Technically, the customer can understand that the problem is with the phone field though the flow is not great.

[dmvrtx]

To address first point, we can probably look at the differences between Legacy and Split/Deferred UPEs, but firstly we should understand if there's even a possibility for merchants to have Klarna with Legacy checkout.

That's a good point, indeed. Since merchants with UPE should by this time either enrol into the Split-UPE or Deferred-UPE, I don't think we will gain much by trying to fix this issue. However, we would need to document it well for posterity.

[FangedParakeet]

1. Using Legacy UPE if the phone field is optional and left empty. For Split and Deferred UPEs, the Klarna redirect allows entering the phone there.

I think since #5028 and #7780 have been closed, the long days when Legacy UPE was once at large have now ended, so we should be able to ignore this case now.

2. Using any UPE if the entered phone doesn't validate against the country. The error message indicates that the problem is with the phone number, and the customer can get back to the store, but we show only the generic We're not able to process this payment. Please try again later. error message.

It seems that we should be able to resolve this scenario.

For the second point, there are 3 options, listed from best to worth[sic.]:

• Perform phone field validation before redirecting to Klarna
• Add a proper error message when redirecting back from Klarna with an error

I think I would be satisfied with either of the two above outcomes. If there is some available country-specific phone number validation we can reuse when Klarna is selected, the first option seems preferable; otherwise we should at least surface a valid error message to the end user, so that they are prompted to resolve the error themselves.

[timur27]

I guess the issue slightly changed its scope, which currently contains improving phone number validation prior to redirection to Klarna. (second point in https://github.com/Automattic/woocommerce-payments/issues/7319#issuecomment-1742740783

Having said that, I took the liberty of editing the issue title to reflect the current scope of the work that needs to be done here.

[frosso]

I think some changes happened between when the error was first reported until now.

I tested both "create account" and "existing account" scenarios with Klarna, using a US-based merchant store, two fake Italian phone numbers, and a US-based checkout addresses. In all scenarios, I was still able to successfully place the order, despite the phone numbers not matching the account's (nor matching the billing address). Tested on dUPE & shortcode checkout (since it wasn't reproducible on blocks checkout here https://github.com/Automattic/woocommerce-payments/issues/7319#issuecomment-1742714448 ).

What I did notice erroring out was attempting to use Klarna with a US-based merchant account and a non-US billing account, which seems to be expected.

The customer's billing address country is IT which is outside the countries you can accept Klarna payment from.

I went through the past history of this ticket, in the hope I missed some reproduction steps.

I'm going to close this for now, but feel free to re-open it in case it's needed.