Klarna Docs - Klarna WebView

Klarna WebView

This guide will walk you through the steps required to add the Klarna WebView to your React Native app and how to use it.

We will cover:

- Adding the Klarna WebView dependency

- Rendering a Klarna WebView

- Operating on a Klarna WebView

The Klarna WebView is part of Klarna's React Native Mobile SDK. That means to start using the Klarna WebView first you need to add a dependency to your app. To see how you can do that please refer to React Native: Getting Started.

After adding the required dependency you can import the KlarnaStandaloneWebView component and use it like so:

TYPESCRIPT
import {
  KlarnaStandaloneWebView,
  KlarnaWebViewKlarnaMessageEvent,
  KlarnaWebViewError,
  KlarnaWebViewNavigationEvent,
  KlarnaWebViewProgressEvent,
  KlarnaWebViewRenderProcessGoneEvent,
} from 'react-native-klarna-inapp-sdk';

// ...

In what follows we will go through all the props and methods of the KlarnaStandaloneWebView component.

In this section we look at all the props that the KlarnaStandaloneWebView provides.

returnUrl is the only mandatory prop of KlarnaStandaloneWebView. It's a string and is used to redirect third-party apps to your app if required.

Please note that the URL you set for returnUrl should be the exact same URL that you have registered as the return URL of your app. To read about how you can register a return URL for your app please refer to React Native: Getting Started.

This is an optional Android-only prop that allows setting the over scroll mode of the web view. It accepts the following values:

  • always
  • never
  • content

If not provided, the default value will be always.

This is an optional iOS-only boolean prop that allows controlling whether the web view's scroll view bounces past the edge of content and back again. If not provided, the default value will be true.

This prop is optional and is of type ViewStyle. You can use it to style the KlarnaStandaloneWebView.

This prop is an optional lambda that is called when KlarnaStandaloneWebView starts loading/reloading a URL. The lambda has an instance of type KlarnaWebViewNavigationEvent as its only parameter. The properties of KlarnaWebViewNavigationEvent are as follows:

NameTypeDescription
urlstringThe URL that is going to be loaded
loadingbooleanIndicates whether loading is in progress or not
titlestringThe title of the page if the URL is the URL of a page and the page has title
canGoBackbooleanIndicates if KlarnaStandaloneWebView can go back in its history
canGoForwardbooleanIndicates if KlarnaStandaloneWebView can go forward in its history

This prop is an optional lambda that is called when KlarnaStandaloneWebView finishes loading a URL. The lambda has an instance of type KlarnaWebViewNavigationEvent as its only parameter. Please refer to the previous section to learn about the properties of KlarnaWebViewNavigationEvent.

This prop is an optional lambda that is called when KlarnaStandaloneWebView is loading a URL. The lambda has an instance of type KlarnaWebViewProgressEvent as its only parameter. The properties of KlarnaWebViewProgressEvent are as follows:

NameTypeDescription
urlstringThe URL that is going to be loaded
loadingbooleanIndicates whether loading is in progress or not
titlestringThe title of the page if the URL is the URL of a page and the page has title
canGoBackbooleanIndicates if KlarnaStandaloneWebView can go back in its history
canGoForwardbooleanIndicates if KlarnaStandaloneWebView can go forward in its history
progressnumberA number in range 0 to 100 indicating the current progress of loading the URL

This is an optional lambda that is called when KlarnaStandaloneWebView fails to load a URL. The lambda has an instance of type KlarnaWebViewError as its only parameter. The following table shows all the properties of KlarnaWebViewError.

NameTypeDescription
urlstringThe URL that is going to be loaded
loadingbooleanIndicates whether loading is in progress or not
titlestringThe title of the page if the URL is the URL of a page and the page has title
canGoBackbooleanIndicates if KlarnaStandaloneWebView can go back in its history
canGoForwardbooleanIndicates if KlarnaStandaloneWebView can go forward in its history
codenumberA number indicating the error code
descriptionstringThe description of the error

This is an optional lambda that is called when KlarnaStandaloneWebView receives a message from a Klarna component. The lambda has an instance of type KlarnaWebViewKlarnaMessageEvent as its only parameter. As of now, KlarnaWebViewKlarnaMessageEvent has a single property of type string called action that represents the action of the message.

This is an optional Android-only prop that is called when KlarnaStandaloneWebView's process crashes or is killed by the OS. The lambda has an instance of type KlarnaWebViewRenderProcessGoneEvent as its only parameter. As of now, KlarnaWebViewRenderProcessGoneEvent has a single property of type boolean called didCrash. If it's true it means the render process crashed. When it's false it means the render process was killed by the OS.

KlarnaStandaloneWebView exposes a set of methods via a view’s ref. The methods are as follows.

You can use this method to load a URL in the KlarnaStandaloneWebView. It has a single parameter called url of type string that specifies the URL to load.

This method can be used to reload the current URL. It does not have any parameters.

The method allows you to navigate to the previously loaded URL on the KlarnaStandaloneWebView. In essence, it lets you move back one step in the history of the loaded URLs. When this method is used, the current URL will be replaced with the URL that was loaded immediately prior to it in the browsing history of the KlarnaStandaloneWebView.

The goForward method, on the other hand, enables you to navigate to the next URL in the history of the KlarnaStandaloneWebView. Basically, it allows you to move forward one step in this history. When you apply this method, the current URL is replaced with the URL that you navigated to immediately after the current URL in the KlarnaStandaloneWebView's browsing history, assuming you went back previously. This method is the opposite of goBack.