Hybrid Integration on Android


You can hook up your web view to the SDK in only a few steps and immediately provide a much more pleasant experience when using Klarna products on mobile.

This guide will walk you through:

  • Initializing the SDK.
  • Adding a web view.
  • Notifyng the SDK when something occurs in the web view.
  • Getting events from the SDK.

Setting up the SDK

Setting up the SDK consists of creating an instance of the SDK and implementing a listener.

Instantiate the SDK

Initialize the Hybrid SDK by creating a new instance of KlarnaHybridSDK. You should hold a strong reference to the SDK. It will deallocate all its resources if you null it. You only need a single instance of the SDK, regardless of how many web views you have, but if you need to, you can create several SDKs.

Creating an Instance

ParamTypeDescription
Param
returnUrl
Type
String
Description
A URL that the SDK can use to return customers to your app.
Param
callback
Type
KlarnaHybridSDKCallback
Description
Callback interface that will notify you about changes in the SDK.
1
    val klarnaHybridSDK = KlarnaHybridSDK(returnUrl, callback)
1
    final KlarnaHybridSDK klarnaHybridSDK = new KlarnaHybridSDK(returnUrl, callback);

The Hybrid Callback Object

The SDK will notify you of events via a callback object that you’ll need to implement. It acts like a listener on Android, however, unlike a listener, it’s not optional.

You can read more about the callback below.

Adding a Web View

You need to add the web views that the SDK should track. The SDK will hold weak references to these web views, so if they’re deallocated, the SDK will lose track of them.

Create an instance of WebView either in your layout or directly in your code and pass it to the SDK with addWebView(). This web view will be used to render your checkout content.

Add a Web View

ParamTypeDescription
Param
webView
Type
WebView
Description
A WebView that the SDK will track ongoingly.

Retrieving a Web View from XML

To add a web view to the SDK from a layout:

1
2
    val webView = findViewById(R.id.webView)
    klarnaHybridSDK.addWebView(webView)
1
2
    final WebView webView = findViewById(R.id.webView);
    klarnaHybridSDK.addWebView(webView);

Creating a Web View in Code

To add a web view to the SDK from code:

1
2
    val webView = WebView(this)
    klarnaHybridSDK.addWebView(webView)
1
2
    final WebView webView =  new WebView(this);
    klarnaHybridSDK.addWebView(webView);

Notifying the SDK

There are two instances at which you’ll need to notify the SDK of events in your web view (as we don’t override your WebViewClient).

Before a Navigation

You should notify the SDK about upcoming navigations by calling the SDK’s shouldFollowNavigation() from your WebViewClient.

Calling Should Follow Navigation

ParamTypeDescription
Param
url
Type
URL
Description
The URL that will be loaded.
1
2
3
4
5
    class MyWebViewClient(): WebViewClient() {
        override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
            return !klarnaHybridSDK.shouldFollowNavigation(url)
        }
    }
1
2
3
4
5
6
    public class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return !klarnaHybridSDK.shouldFollowNavigation(url);
        }
    }


After a Navigation

You need to notify the SDK after a page has loaded by calling the SDK’s newPageLoad() from your WebViewClient.

Calling New Page Load

ParamTypeDescription
Param
webView
Type
WebView
Description
The WebView that new content has loaded in.
Param
url
Type
String
Description
URL that will be loaded on the page.
1
2
3
4
5
    class MyWebViewClient(): WebViewClient() {
        override fun onPageFinished(view: WebView, url: String) {
            klarnaHybridSDK.newPagelLoad(view, url)
        }
    }
1
2
3
4
5
6
    public class MyWebViewClient extends WebViewClient {
        @Override
        public void onPageFinished(WebView view, String url) {
            klarnaHybridSDK.newPageLoad(view, url);
        }
    }

Handling Events

More About the Klarna Hybrid SDK Callback

Your app will need to implement the KlarnaHybridSDKCallback interface. This will let your app be notified about relevant events that happen inside the web view that the SDK is observing. There are currently five events:

  • Four events notifying you of fullscreen transitions.
  • One error event.

All of these provide you with the web view these events occured in. You can read more about the fullscreen events here .

You listen to these methods by implementing KlarnaHybridSDKCallback in your checkout’s Activity.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
    class MyActivity: AppCompatActivity(), KlarnaHybridSDKCallback {
        // ...
        override fun willShowFullscreenContent(webView: WebView, completion: () -> Unit) {
            // ...
            completion()
        }
        override fun didShowFullscreenContent(webView: WebView, completion: () -> Unit) {
            // ...
            completion()
        }
        override fun willHideFullscreenContent(webView: WebView, completion: () -> Unit) {
            // ...
            completion()
        }
        override fun didHideFullscreenContent(webView: WebView, completion: () -> Unit) {
            // ...
            completion()
        }
        override fun onErrorOccurred(webView: WebView, error: KlarnaMobileSDKError) {
            // ...
        }
    }

The completion handler completion() should be called when you have performed any animations or changes to let the SDK know that your app is done with this step. The only exception is onErrorOccurred() which does not expect an action to be performed by the app when called.