Klarna Checkout iOS Migration Guide

Klarna Checkout SDK was previously a stand alone library, but now it has become part of the Klarna Mobile SDK developed solutions.

As of the previous version the new Klarna Checkout can be integrated in the mobile projects in the following ways:

In the previous implementation of the checkout, the initialization of the library was done using the KCOKlarnaCheckout class, like in the following example:

@objc

// Previous implementation
self.checkout = [[KCOKlarnaCheckout alloc] initWithViewController:self redirectURI:<YOUR-URL>];
checkout.snippet = @"<div id='klarna-checkout-container'><script>...</script></div>";

swift

// New implementation
self.checkout = KlarnaCheckoutView(returnURL: <YOUR-URL>, eventHandler: <YOUR-KlarnaEventHandler>)
checkout.setSnippet("<div id='klarna-checkout-container'><script>...</script></div>")

And there was the possibility to use the checkout interface in two different modes:

After initializing the checkout SDK, previously you needed to get the checkout controller from he SDK and present/push it , as the following example:

@objc

// Previous implementation
UIViewController<KCOCheckoutViewController> *viewController = [checkout checkoutViewController];
[self.navigationController pushViewController:viewController];

In the new Klarna checkout implementation in order to simplify the SDK usage this fullscreen mode is no longer available, instead the embedded mode should be used.

In case you have your own native checkout flow and want to embed the Klarna checkout view, the KlarnaCheckoutView is the recommended way.

// New implementation
self.checkout = KlarnaCheckoutView(returnURL: <YOUR-URL>, eventHandler: <YOUR-KlarnaEventHandler>)
checkout.setSnippet(<YOUR-SNIPPET>)
<YOUR-SUPERVIEW>.addSubview(checkout)

When handling the checkout in the embedded mode, there are some behaviours that need to be taken care of on your side, like the scrolling (only for old SDK) and the resizing of the view.

In the previous implementation the handling was done as follows (where sizingDelegate should implement the KCOCheckoutSizingDelegate protocol:

// Previous implementation
viewController.internalScrollDisabled = YES;
viewController.sizingDelegate = self;
viewController.parentScrollView = self.scrollView;

Then as you are responsible to manage the resizing the checkout, you needed to implement the following method:

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

For the new implementation in the KlarnaMobileSDK of the Klarna checkout part of the process is the same for disabling the automatic scrolling, but the sizing delegate protocol was renamed to KlarnaSizingDelegate:

// New implementation
self.checkout.sizingDelegate = self

Then for the resizing behaviour the sizingDelegate should implement the following method:

// New implementation
func klarnaComponent(_ klarnaComponent: KlarnaComponent, resizedToHeight height: CGFloat) {
	// Handle the new height value to resize the native view
}

Hybrid Mode
In the old version of the Checkout SDK, the hybrid mode setup was done by creating the KCOKlarnaCheckout object and attaching an external webView to it, as the following example:

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

To use the checkout in the new SDK, you can follow the hybrid guide, which has the unified information related to all integrations in hybrid mode.

In the previous version of the SDK notifications were used to alert about important events in the checkout flow, an example of that is the following code:

// Previous implementation
- (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;
         }
    }

For this new implementation, this is no longer the case. Now an event handler must be set in place, and will be the one receiving the different events triggered by checkout. The KlarnaCheckoutView have a property called eventHandler that should be set and it should implement the KlarnaEvenHandler protocol as follows:

// New implementation
func klarnaComponent(_ klarnaComponent: KlarnaComponent, dispatchedEvent event: KlarnaProductEvent) {
    if(event.action == "complete") {
	let confirmationURL = event.params["uri"]
        // handle the url
    }
}
 
func klarnaComponent(_ klarnaComponent: KlarnaComponent, encounteredError error: KlarnaError) {
     // Receive and process SDK related errors

This implementations remain practically the same, when doing a server-side call while the checkout is visible, the user interaction can be suspended and resumed as needed with the following methods:

// Previous implementation
[self.checkout suspend];
[self.checkout resume];
 
// New implementation
self.checkout.suspend()
self.checkout.resume()

For the behaviour the previous implementation presented a boolean variable that can be modified, as the following example:

// Previous implementation
self.checkout.merchantHandlesEpm = YES;
self.checkout.merchantHandlesValidationErrors = YES;

In the new implementation checkout objects have a new property called checkoutOptions, where the user can set the values for the options enabled, for example:

// New implementation
self.checkout.checkoutOptions.merchantHandlesEPM = true
self.checkout.checkoutOptions.merchantHandlesValidationErrors = true

Then the event listener will be notified with the corresponding event.