Integration guide

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

The components in the Native approach are

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

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

pod ‘KlarnaCheckout’

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

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:

LSApplicationQueriesSchemes bankid

In your mobile app you will need to fetch a Klarna Checkout HTML snippet from your web server. This integration guide will not go through the Klarna Checkout integration in detail, but assumes it has been set up already and is available at an API endpoint YOUR-URL on your servers. 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.

You are now ready to render Klarna Checkout in your mobile app.

To initialize the Klarna Checkout in your native flow, you supply a Checkout HTML snippet hosted at YOUR-URL

self.checkout = [[KCOKlarnaCheckout alloc] initWithViewController:self redirectURI:<YOUR-URL>]; Setting the snippet will start preloading the checkout, which ensures a better experience for the users.

checkout.snippet = @"

You have two options for presenting the Klarna Checkout view

• Full size Checkout - spanning the whole sceen, page scrolling takes place within the HTML snippet
• Embedded Checkout - embedded, page scrolling takes place outside the HTML snippet

If you want to display this view controller taking all screen space, you can use it as usual by pushing it in your navigation stack.

UIViewController<KCOCheckoutViewController> *viewController = [checkout checkoutViewController];

// This viewController can be displayed as is. [self.navigationController pushViewController:viewController];

Or, if you want to integrate it in your own native checkout flow, you can add the checkoutViewController as a childViewController and handle resize events for the checkout.

First you need to disable internal scrolling and suply a sizing delegate implementing <KCOEmbeddableCheckoutSizingDelegate>. This will make the viewcontroller fill its internal scrollview to its parent, with no scrolling. Now you are responsible for making the checkout view as big as it needs to be.

viewController.internalScrollDisabled = YES; viewController.sizingDelegate = self; viewController.parentScrollView = self.scrollView; You may also implement the resize method. In the resize event it is up to you how to layout the views, but you need to make sure the view gets the required size. Whether you manually set frames or use autolayout is totally up to you.

• (void)checkoutViewController:(id)checkout didResize:(CGSize)size { // Update the size of the checkout view controller to match the new size. }

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 successful screen you need to load confirmation HTML snippet upon receiving 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 *url = [NSURL URLWithString:uri]; checkout.snippet = confirmationSnippet; } } }

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.

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