Adding Klarna Checkout SDK to Your App - Hybrid Integration


Integration guide for how to integrate Klarna Checkout in your Android app, using the hybrid integration.

This guide will teach you how to:

  • Initialize the Checkout SDK with your WebView
  • Present your web page
  • Listen to SDK events

Components

The components in the hybrid approach are:

  • An integration of Klarna Checkout from your servers to Klarna’s servers
  • A web page on your servers, where Klarna Checkout is fetched from the mobile SDK
  • Klarna Checkout SDK for mobile apps
  • Your mobile app

You will need Klarna Checkout integrated on a web page on your server. This integration guide will not go through the Klarna Checkout integration in detail, but assumes it has been set up already. If needed, you can learn how to do it in the regular Klarna Checkout Integration guide here .

The communication between your mobile app, Klarna’s SDK, your servers and Klarna’s servers.

Working with the Checkout SDK

Initialize SDK with your WebView

Initialize the SDK with your web view. You first create a KlarnaCheckout object, and set the WebView to this object:

ParamTypeDescription
Param
currentActivity
Type
Activity
Description
The Activity that will contain the checkout view
Param
returnURL
Type
String
Description
URL schema as defined in your AndroidManifest.xml to return from external applications. Learn more about it here
1
2
val checkout = KlarnaCheckout(this, returnURL)
checkout.setWebView(myWebView)
1
2
final KlarnaCheckout checkout = new KlarnaCheckout(this, returnURL);
checkout.setWebView(myWebView);

Present your web page

From your WebView, load the URL to the web page where you have integrated Klarna Checkout. The SDK will automatically run when it detects the Checkout snippet in the WebView:

1
myWebView.loadUrl("https://www.example.store/checkout")
1
myWebView.loadUrl("https://www.example.store/checkout");

Configure event listeners

The only event you need to listen to is the “complete event”. When the complete event is triggered, redirect the customer to the confirmation page within your app.

Following is a code example of how this is done:

1
2
3
4
5
6
7
8
9
10
checkout.setSignalListener { eventName, jsonObject ->
    if (eventName == "complete") {
        try {
            val confirmationURL = jsonObject.getString("uri")
            loadConfirmationSnippet(confirmationURL)
        } catch (e: JSONException) {
            Log.e(TAG, e.message, e)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
checkout.setSignalListener(new SignalListener() {
    @Override
    public void onSignal(String eventName, JSONObject jsonObject) {
        if (eventName.equals("complete")) {
            try {
                final String confirmationURL = jsonObject.getString("uri");
                loadConfirmationSnippet(confirmationURL);
            } catch (JSONException e) {
                Log.e(TAG, e.getMessage(), e);
            }
        }
    }
);

Optionally, you may want to set up event listeners to track field changes in the Klarna Checkout before the order is placed. See the reference guide for what events are available.

Cleanup

When you are done with the checkout, make sure to call destroy() to release resources.

1
checkout.destroy()
1
checkout.destroy();

Return URL

Some payment methods require authorization through third-party applications. These can return to your application upon completion, but to do that, you need to supply a URL that should be used for returning. There do not need to be any special handlers on application load for that URL. Our only requirement is that the user is returned to your application from the third-party application.

Note:

In cases where the user needs to authenticate with their bank for credit card payments, the bank itself might open a third-party app such as Bank ID. Since the SDK does not create these sessions, the user would have to return to the app manually, and then you will get the completion signal from the checkout.

Next steps

Success! You now have Klarna Checkout up and running in your mobile app.

Check out our git-hub page where you can

  • Read API documentation
  • Look at an example app
  • Report an issue