Fiksuruoka-fi / capacitor-klarna-kco

Klarna KCO integration to Capacitor.js
1 stars 0 forks source link

Ios payment white screen #10

Open hampusboas opened 3 months ago

hampusboas commented 3 months ago

Hi, thanks for the update to capacitor 6!

After updating top Cap 6 the previous android nordea card payment issue was resolved so that is great news! But the issue still exists in Ios the screen turns white when klarna iframe tries to load the external auth method from Nordea.

Is this related to some settings in the info.plist? Is there any things that i need to add to the plist for this issue maybee? And how should the returnUrl be formatted?

Many thanks in advanced. Have a nice weekend

hampusboas commented 3 months ago

Here is an error code when klarna tries to open the page: 0x1380e9818 - [pageProxyID=33, webPageID=34, PID=2 422] WebPageProxy::didFailLoadForFrame: frameID=561, isMainFrame=0, domain=NSURLErrorDomain, code=18 446 744 073 709 550 617

eljass commented 2 months ago

Hello @hampusboas!

Glad to hear that the previous issue were fixed (even though we did not do anything special, except upgrade for Capacitor v6)! Sometimes there is some black magic in here :D

I've just asked our Customer support if we have heard any problems on Nordea payments from our customers so let's see what we hear. We have thousands of customers so I would expect that we have had heard of this earlier though if our apps are experiencing the same.

Maybe to check little further with this one, did you use simulator or real device?

When testing with my real device, the flow for us is as follows:

  1. Select Klarna's option to pay with card or bank account
  2. It opens the One Klarna screen
  3. Select "Pay now"
  4. It asks if you would like to pay with bank or card -> Select bank
  5. It opens new screen to select which bank would you use -> Select nordea
  6. It shows steps overview within this view
  7. Click "Continue"
  8. It opens external browser (safari) to Nordea's authentication page where you can fill your bank username
  9. Nordea's page asks to verify the purchase in Nordea ID app
  10. Once done, user needs to reopen the app and it goes forward to our order confirmation page.

For the URL structure we have for our returnURL is in the format of scheme://resource. So you would need to create new URL type for your app: https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app#Register-your-URL-scheme

This gives you the scheme:// you can then use with returnURL, so for example let's say:

then the return URL should be: company://example.com/checkout. The scheme opens our app, the domain stays the same that capacitor app is using, and then in our app we handle redirection to the path.

Note: Usually the app should be open in background already, so just using the shcme for returnURL should bring it back to active if you are not redirecting or doing anything with Capacitor App plugin's listeners (https://capacitorjs.com/docs/apis/app). To make this work we have utilize few different things in our side:

Hopefully these helps you to identify what could go wrong, as it seems to work with us. I'll get back to you if I hear some customer feedback with Nordea payments.

hampusboas commented 2 months ago

@eljass Thank you for the detailed description. I can't see nothing wrong in my configuration. This error only applies when the user does not sign in to klarna and only enters the card directly. But i have created a issue in the klarna SDK for iOS so hopefully they will create a fix. But they are so slow on the support.

Many thanks for taking your time and keeping this repo up to date 🏆🤩 Have a great day!

eljass commented 2 months ago

@hampusboas Thanks for the update! Let's keep this issue open here for a while if we can somehow reproduce. You can also share if Klarna finds some solutions/bugs on their end.