Hybrid Integration on iOS


You can hook up your web view to the SDK in only a few steps and immediately provide a much more pleasant experience when using Klarna products on mobile.

This guide will walk you through:

  • Initializing the SDK.
  • Adding a web view.
  • Notifyng the SDK when something occurs in the web view.
  • Getting events from the SDK.

Setting up the SDK

Setting up the SDK consists of creating an instance of the SDK and implementing a listener.

Instantiate the SDK

Initialize the Hybrid SDK by creating a new instance of KlarnaHybridSDK. You should hold a strong reference to the SDK. It will deallocate all its resources if you nil it. You only need a single instance of the SDK, regardless of how many web views you have, but you can create several KlarnaHybridSDK instances.

Creating an Instance

ParamTypeDescription
Param
returnUrl
Type
String
Description
A URL that the SDK can use to return customers to your app.
Param
eventListener
Type
KlarnaHybridSDKEventListener
Description
Callback interface that will notify you about changes in the SDK.
1
let sdk = KlarnaHybridSDK(returnUrl: "app-return-url://", eventListener: self)
1
KlarnaHybridSDK* sdk = [[KlarnaHybridSDK alloc] initWithReturnUrl: @"app-return-url://" eventListener:self];

The Hybrid Event Listener

The SDK will notify you of events via an event listener that you’ll need to implement. It acts like a conventional delegate on iOS, however, unlike a delegate, it’s not optional.

You can read more about the event listener below.

Adding a Web View

You need to add the web views that the SDK should track. The SDK will hold weak references to these web views, so if they’re deallocated, the SDK will lose track of them.

The SDK can handle both UIWebViews and WKWebViews, which it references under a single KlarnaWebView protocol.

Add a Web View

ParamTypeDescription
Param
webView
Type
KlarnaWebView
Description
A WebView that the SDK will track ongoingly.
1
 sdk.addWebView(self.webView)
1
[sdk addWebView: self.webView];

Notifying the SDK

There are two instances at which you’ll need to notify the SDK of events in your web view (as we don’t override your UIWebViewDelegate or WKNavigationDelegate).

Before a Navigation

You should notify the SDK about upcoming navigations by calling the SDK’s shouldFollowNavigation() before a navigation occurs.

Calling Should Follow Navigation

ParamTypeDescription
Param
request
Type
URLRequest
Description
The request that your web view will perform.

With UIWebView

If you have a UIWebView, you should do this in your UIWebViewDelegate:

1
2
3
func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool {
    return sdk.shouldFollowNavigation(withRequest: request)
}
1
2
3
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    return [self.sdk shouldFollowNavigationWithRequest: request];
}

With WKWebView

If you have a WKWebView, you should do this in your WKNavigationDelegate:

1
2
3
4
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    let shouldFollow = sdk.shouldFollowNavigation(withRequest: navigationAction.request)
    decisionHandler(shouldFollow ? WKNavigationActionPolicy.allow : WKNavigationActionPolicy.cancel)
}
1
2
3
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    decisionHandler([sdk shouldFollowNavigationWithRequest:navigationAction.request]);
}


After a Navigation

You need to notify the SDK after a page has loaded by calling the SDK’s newPageLoad() from your web view’s delegate.

New Page Load Params

ParamTypeDescription
Param
webView
Type
KlarnaWebView
Description
The web view that new content has loaded in.

With UIWebView

If you have a UIWebView, you should do this in your UIWebViewDelegate:

1
2
3
func webViewDidStartLoad(_ webView: UIWebView) {
    sdk?.newPageLoad(in: webView)
}
1
2
3
- (void)webViewDidStartLoad:(UIWebView *)webView {
    [sdk newPageLoadIn:webView];
}               

With WKWebView

If you have a WKWebView, you should do this in your WKNavigationDelegate:

1
2
3
func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    sdk?.newPageLoad(in: webView)
}
1
2
3
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    [sdk newPageLoadIn:webView];
}

Handling Events

More About the Klarna Hybrid SDK Listener

Your app will need to implement the KlarnaHybridSDKListener interface. This will let your app be notified about relevant events that happen inside the web view that the SDK is observing. There are currently five events:

  • Four events notifying you of fullscreen transitions.
  • One error event.

All of these provide you with the web view these events occured in. You can read more about the fullscreen events here .

You listen to these methods by implementing KlarnaHybridSDKEventListener in some part of the application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
func klarnaWillShowFullscreenContent(in webView: KlarnaWebView, completion: @escaping () -> Void) {
    completion()
}

func klarnaDidShowFullscreenContent(in webView: KlarnaWebView, completion: @escaping () -> Void) {
    completion()
}

func klarnaWillHideFullscreenContent(in webView: KlarnaWebView, completion: @escaping () -> Void) {
    completion()
}

func klarnaDidHideFullscreenContent(in webView: KlarnaWebView, completion: @escaping () -> Void) {
    completion()
}

func klarnaFailed(in webView: KlarnaWebView, withError error: KlarnaMobileSDKError) {
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (void)klarnaDidHideFullscreenContentIn:(id<KlarnaWebView> _Nonnull)webView completion:(void (^ _Nonnull)(void))completion { 
    completion();
}

- (void)klarnaDidShowFullscreenContentIn:(id<KlarnaWebView> _Nonnull)webView completion:(void (^ _Nonnull)(void))completion { 
    completion();
}

- (void)klarnaWillHideFullscreenContentIn:(id<KlarnaWebView> _Nonnull)webView completion:(void (^ _Nonnull)(void))completion { 
    completion();
}

- (void)klarnaWillShowFullscreenContentIn:(id<KlarnaWebView> _Nonnull)webView completion:(void (^ _Nonnull)(void))completion { 
    completion();
}

- (void)klarnaFailedIn:(id<KlarnaWebView> _Nonnull)webView withError:(KlarnaMobileSDKError * _Nonnull)error { 

}

The completion handler completion() should be called when you have performed any animations or changes to let the SDK know that your app is done with this step.