Branch: master
Find file History
Latest commit 8dfe4e0 Mar 23, 2018
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
KlarnaCheckoutSDK.framework 1.6.2 Release Mar 22, 2018
README.md Fix documentation. Mar 23, 2018
changelog.md 1.6.2 Release Mar 22, 2018

README.md

Klarna Checkout iOS SDK

Setup

The Klarna Checkout SDK is currently avaliable through Cocoapods. The simplest way to add the framework is to the pod with our supplied podspec.

pod 'KlarnaCheckoutSDK'

Alternatively you can add the framework manually. Remember to link the required frameworks as well.

MobileCoreServices
SafariServices
JavascriptCore
SystemConfiguration
WebKit
Security
CFNetwork

Integration

The SDK allows developers to integrate a native checkout experience into their applications. When you create an order through Klarna's checkout API, you are provided an HTML snippet to render Klarna Checkout.

We offer two ways applications may present Klarna Checkout:

  • Native mode: We manage the checkout view (either as a full standalone view or embedded into your application.)
  • Hybrid mode: We manage the checkout view when you provide us with a web view (e.g. your application renders HTML around the checkout and handles the sizing and rendering of the web view).

Native Mode

Initialization

To add the checkout in your native flow, you supply a snippet which you retrieved through order API.

First, you create a KCOKlarnaCheckout and set the html snippet:

self.checkout = [[KCOKlarnaCheckout alloc] initWithViewController:self returnURL:<YOUR-URL>];
checkout.snippet = snippet;

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

Standalone View

If you wish to display this view controller as a standalone view, you can retrieve a KCOCheckoutViewController and present it by pushing it in your navigation stack:

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

Embedded View

If you want to integrate it into your own native checkout view, 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 KCOCheckoutSizingDelegate. This will make the viewcontroller fill its internal scrollview to its parent and not scroll.

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.

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

Completion

When you get the completion signal from the SDK (see below in Signalling), you should render the completion view for users.

In native mode, you can do this by rendering the completion snippet Klarna provides you with. Your backend can retrieve the snippet as detailed here, in Klarna's documentation.

Once your app has the completion snippet, it should set the snippet on the checkout object:

checkout.snippet = snippet;

This insures that the fullscreen loading view disappears and the user sees important information about their order.

Hybrid Mode

❗️️️ ❗️️️ Important ❗️️️ ❗️️️

Please note that this mode will will be deprecated in the future. If you are currently using Hybrid mode, please migrate from Hybrid mode as soon as possible. If you can't, don't hesitate to contact us and we'll investigate a solution that will work with your integration needs.

Initialization

If you are using the Klarna Checkout in a web view by loading your Checkout URL (or by loading another URL that contains the checkout snippet), you instantiate KCOKlarnaCheckout in the same way as before, but you instead attach your web view.

self.checkout = [[KCOKlarnaCheckout alloc] initWithViewController:self returnURL:<YOUR-URL>];
[self.checkout setWebView: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 web view delegate, so you can keep using the web view as normal.

To correctly set up the checkout flow you must notify the checkout that the view has loaded - so in your viewDidLoad call notifyViewDidLoad on the checkout.

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.checkout notifyViewDidLoad];
}

If your view has already loaded when you create the checkout, you should call notifyViewDidLoad immediately.

Warning: You should only call this method once!

Completion

When you get the completion signal from the SDK (see below in Signalling), you should render the completion view for users.

In hybrid mode, this is accomplished by opening the URL you get in the completion notifiction in your web view. You can parse the contents of the notification with KCOSignalNameKey and KCOSignalDataKey.

- (void)handleNotification:(NSNotification *)notification
{
    NSString *name = notification.userInfo[KCOSignalNameKey];
    NSDictionary *data = notification.userInfo[KCOSignalDataKey];

    if ([name isEqualToString:@"complete"]) {
        [self handleCompletionUri:[data objectForKey:@"uri"]];
    }
}

- (void)handleCompletionUri:(NSString *)uri{
    if (uri && [uri isKindOfClass:[NSString class]] && uri.length > 0) {
        NSURL *url = [NSURL URLWithString:uri];
        [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
    }
}

If you don't want to navigate away from current URL in your web view, you must retrieve the completion snippet from Klarna and render it in your web view yourself. Your backend can retrieve the snippet as detailed here, in Klarna's documentation.

This insures that the fullscreen loading view disappears and the user sees important information about their order.

If you want to display the confirmation page in another webview than the one you showed the initial flow in, you must first attach the webview to the checkout. Handling the completion uri could look something like this:

- (void)handleCompletionUri:(NSString *)uri{
    if (uri && [uri isKindOfClass:[NSString class]] && uri.length > 0) {
        NSURL *url = [NSURL URLWithString:uri];
        [self.checkout attachWebView:self.confirmationWebView];
        [self.confirmationWebView loadRequest:[NSURLRequest requestWithURL:url]];   
    }
}

Signalling

The SDK will signal your application when the order is complete through an NSNotification. You can observe for signals through the default NSNotificationCenter, listening to a KCOSignalNotification:

    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(handleNotification:) name:KCOSignalNotification object:nil];
- (void)handleNotification:(NSNotification *)notification
{
    NSString *name = notification.userInfo[KCOSignalNameKey];
    NSDictionary *data = notification.userInfo[KCOSignalDataKey];

    if ([name isEqualToString:@"complete"]) {
        // Order is complete!
    }
}

Redirect URI

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.

For example, you can supply a url like: my-schema:return.url and add the my-schema protocol to your info.plist file.