In case your mobile app is integrated with Klarna Payments and it is not using Klarna SDK, the payment flow could be interrupted getting the customer experience “stuck” on a page with the animated Klarna logo and not allowing to proceed with the payment.

In order to understand what might cause the issue described above please ask your engineering team to follow the steps below. It is important to have all of the recommendations below implemented to make sure that Klarna Payments flow is working correctly.

This step is recommended for best performance.

If your application has integration with "Sign In with Google" or any other social sign-in provider, we recommend using the same webview component for running the Klarna Payments flow. In detail it means:

• Use ASWebAuthenticationSession on iOS
• Use CustomTabs on Android

It is best to allow ‘*.klarna.com’ domains to be loaded in your webview, but if you need to have a specific list, use the following:

• js.klarna.com
• pay.klarna.com
• payments.klarna.com
• login.klarna.com

If you are using the `react-native-webview` library, it is configured in the `originWhitelist` property and in the `onShouldStartLoadWithRequest` property.

It is crucial that your webview does not block any response codes, like 302 and 303 that are commonly used for browser redirections. Klarna Payments flow relies on this capability in order to run correctly.

If you are using the `react-native-webview` library, check that you allow both Klarna Domains and the redirect status codes in the `onShouldStartLoadWithRequest` handler and `onNavigationStateChange` handler.

Klarna Payments flow uses OAuth2 protocol to securely log the user in, so it is crucial that this flow is not blocked in your webview component. OAuth2 protocol is an industry standard for running user login flows, used by Google, Apple, Facebook and others.

If you are using the `react-native-webview` library, check that you allow both Klarna Domains and the redirect status codes in the `onShouldStartLoadWithRequest` handler and `onNavigationStateChange` handler.

Klarna Payments flow requires the capability to perform real time identification and verification (ID&V) for fraud prevention, underwriting, and KYC purposes, so it is crucial that your webview has the required configurations to support ID&V. 

To provide correct ID&V flows, standard user agent info is crucial. If there’s a need to customize user agent, the customized info should be added at the end of the standard user agent without overwriting it, as below:

Mozilla/[version] ([system and browser information]) [platform details] [engine details] [browser details]; example.app/[version]

If you’re using an iframe to integrate with Klarna, it’s not recommended. But if you do, check that you configure the following permissions correctly:

<iframe
	src="..."
	allow="camera *;microphone *;geolocation *;clipboard-read *;clipboard-write *"
></iframe>

If you are using the `react-native-webview` library, check that you configure the following 2 properties correctly as below:

• allowsInlineMediaPlayback = true
• mediaPlaybackRequiresUserAction = false

And also apply the changes suggested below for each platform.

For iOS app, 

1 - Set the permissions below in the Info.plist file as below:

<key>NSCameraUsageDescription</key>
<string>Camera Access</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Location Access</string>

2 - [Native App only] Set WKWebView configuration as below example:

func createWebView() -> WKWebView {
    let config = WKWebViewConfiguration()
    config.allowsInlineMediaPlayback = true
    config.mediaTypesRequiringUserActionForPlayback = []

    let webview = WKWebView(frame: .zero, configuration: config)
    return webview
}

For Android app, 

1 - Update permission setting in AndroidManifest.xml as below,

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />

2 - [Native App only] Allow runtime permissions requests while accessing camera from the webview by setting WebChromeClient to your WebView and implementing onPermissionRequest callback. 

Example of a WebChromeClient implementation would look similar to the following:

public class CustomWebChromeClient : WebChromeClient() {
    override fun onPermissionRequest(request: PermissionRequest?) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            val requiredPermissions = getRequiredPermissions(request)
            requestPermissions(requiredPermissions) { accepted ->
                if (accepted) {
                    request?.grant(request.resources)
                } else {
                    request?.deny()
                }

3 - [Native App only] Make sure to also enable playback without user input via WebView settings. 

webview.settings.mediaPlaybackRequiresUserGesture = false