Adding Klarna Checkout SDK to Your App - Hybrid Integration

Integration guide for how to integrate Klarna Checkout in your iOS 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

You are now ready to render Klarna Checkout in your mobile app. You should use a KCOKlarnaCheckout object and instantiate it with your current view controller and the webview:

1
2
    self.checkout = \[\[KCOKlarnaCheckout alloc\] initWithViewController:self redirectURI:<YOUR-URL>\];
    \[self.checkout attachWebView:self.webview\];

The SDK will handle the checkout flow and return signals on certain events. The SDK will keep a weak reference of the view controller, and we will never override the webview delegate, so you can keep using it as normal.

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
2
NSURL \*checkoutURL = \[NSURL URLWithString:@"https://www.example.store/checkout"\];
\[self.webView loadRequest:\[NSURLRequest requestWithURL:checkoutURL\]\];

To handle the signals received from the SDK you should set up an observer listening to the KCOSignalNotification. To ensure the checkout shows the successful screen, you need to redirect your webview to the completion URL upon receiving the complete message:

1
2
3
4
5
6
7
8
9
10
11
12
\- (void)handleNotification:(NSNotification \*)notification
{
    NSString \*name = notification.userInfo\[KCOSignalNameKey\];
    NSDictionary \*data = notification.userInfo\[KCOSignalDataKey\];

    if (\[name isEqualToString:@"complete"\]) {
        if (uri && \[uri isKindOfClass:\[NSString class\]\] && uri.length > 0) {
        NSURL \*confirmationURL = \[NSURL URLWithString:confirmationURI\];
        \[self.webView loadRequest:\[NSURLRequest requestWithURL:confirmationURL\]\];
        }
    }
}

You may also 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.

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.

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.

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