Integration guide

iOS / Hybrid Approach 

Integration guide for how to integrate Klarna Checkout in your iOS app, using the Hybrid approach.

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


Step 1. Installation

Either use Cocoapods, or manually install the Klarna Checkout SDK for mobile apps in your environment.

Cocoapods

pod 'KlarnaCheckout'

 

Manual installation

If you don't use Cocoapods, manually download the iOS SDK framework from github and link the dependencies

MobileCoreServices
SafariServices
JavascriptCore
SystemConfiguration
WebKit
Security
CFNetwork

 

Step 2. Prepare your app

Klarna Checkout needs to be able to open external apps, since this is required in some consumer authentication scenarios.

Add the following configuration in your Info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>bankid</string>
</array>

 

Step 3. Prepare your web page with Klarna Checkout integrated

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.

 

 

Step 4. Initialize SDK with your WebView

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. 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.

To set it up, you create a KCOKlarnaCheckout, and supply a Checkout web page hosted at YOUR-URL

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

 

Step 5. Present your web page

Present your web page

NSURL *checkoutURL = [NSURL URLWithString:@"https://www.example.store/checkout"];
[self.webView loadRequest:[NSURLRequest requestWithURL:checkoutURL]];

 

Step 6. Configure event listeners

To handle the signals received from the SDK you should set up an observer listening to the KCOSignalNotification. To make sure the checkout shows the succesful screen you need to redirect your webview to the completion url upon recieveing the complete message.

- (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.

 

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