Adding Klarna Checkout SDK to Your App - Native Integration


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

This guide will teach you how to:

  • Initialize the Checkout SDK
  • Present the checkout view in your app
  • Listen to SDK events

Components

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

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.

Working with the Checkout SDK

Initialize SDK with the Checkout snippet

To initialize the Klarna Checkout in your native flow, create a KlarnaCheckout object and supply a Checkout HTML snippet hosted at YOUR-URL :

ParamTypeDescription
Param
initWithViewController
Type
UIViewController
Description
The View Controller that will contain the checkout view
Param
returnURL
Type
NSURL
Description
URL schema as defined in your info.plist to return from external applications. Learn more about it here
1
2
    self.checkout = [[KCOKlarnaCheckout alloc] initWithViewController:self redirectURI:<YOUR-URL>];
    checkout.snippet = @"<div id='klarna-checkout-container'><script>...</script></div>";

Setting the snippet will start preloading the checkout, which ensures a better experience for the users.

Present Klarna Checkout view

You have two options for presenting the Klarna Checkout view:

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

Full size Checkout

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:

1
2
3
UIViewController<KCOCheckoutViewController> *viewController = [checkout checkoutViewController];
// This viewController can be displayed as is.
[self.navigationController pushViewController:viewController];

Embedded Checkout

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 supply a sizing delegate implementing KCOEmbeddableCheckoutSizingDelegate. This will make the viewController fill its internal scrollview to its parent and not scroll.

1
2
3
viewController.internalScrollDisabled = YES;
viewController.sizingDelegate = self;
viewController.parentScrollView = self.scrollView;

You are then responsible for resizing the checkout view to be as big as it needs to be. To do this, you’ll need to implement the resize method. At this point, whether you manually set frames or use autolayout is totally up to you.

1
2
3
4
- (void)checkoutViewController:(id)checkout didResize:(CGSize)size
{
// Update the size of the checkout view controller to match the new size.
}

Configure event listeners

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 load confirmation HTML snippet 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 *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.

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