Klarna Docs - Klarna Standalone WebView Integration

Klarna Standalone WebView Integration

In this step-by-step guide you will learn how to integrate the KlarnaStandaloneWebView into your Android app.

KlarnaStandaloneWebView is a customized View that you can integrate into your Android app to enhance Klarna products in web. Essentially, it serves as a tailored WebView designed for rendering Klarna-related content.

The KlarnaStandaloneWebView is a part of Klarna's mobile SDK, necessitating the addition of Klarna's mobile SDK as a dependency to your app. For guidance on how to do this, please refer to this guide.

To add the KlarnaStandaloneWebView to your app's layout, there are two distinct ways. The following sections provide a detailed explanation of each approach.

You can add the KlarnaStandaloneWebView to your XML layout as below.

HTML
<com.klarna.mobile.sdk.api.standalonewebview.KlarnaStandaloneWebView
    app:klarnaEnvironment="..."
    app:klarnaRegion="..."
    app:klarnaResourceEndpoint="..."
    app:klarnaReturnUrl="..."
    app:klarnaTheme="..." 
    ...
/>

In the following table you can learn about the different Klarna-specific attributes that you can set for the KlarnaStandaloneWebView.

AttributeDescription
klarnaEnvironmentAn enumeration that is used to configure the endpoints and other behaviors that the KlarnaStandaloneWebView will be operating with. The possible values are as follows. If not set, the default value will be production.
  • demo
  • staging
  • playground
  • production
klarnaRegionAn enumeration that defines the regional API endpoints to which the KlarnaStandaloneWebView will send/receive requests. The possible values are as follows. If not set, the default value will be eu.
  • eu
  • na
  • oc
klarnaResourceEndpointAn enumeration that defines the cloud provider to which the KlarnaStandaloneWebView will send/receive requests. You do not need to set this attribute.
klarnaReturnUrlThe return URL which is used for navigating users back to your app if necessary.
klarnaThemeAn enumeration that defines the theming for the Klarna-related components that are displayed inside the KlarnaStandaloneWebView. The possible values are as follows. If not set, the default value will be light.
  • light
  • dark
  • automatic

If you instead want to create the KlarnaStandaloneWebView in code, you can use its constructor to create an instance and then add it to your layout.

KOTLIN
val klarnaStandaloneWebView = KlarnaStandaloneWebView(
    context = ...,
    attrs = ...,
    defStyleAttr = ...,
    webViewClient = ...,
    eventHandler = ...,
    environment = ...,
    region = ...,
    theme = ...,
    resourceEndpoint = ...,

In the following table you can see the parameters that the constructor expects. The required parameters are marked with an asterisk.

ParameterTypeDescription
context (*)ContextThe context of the Activity the KlarnaStandaloneWebView is in.
attrsAttributeSetThe AtttributeSet that you usually pass when creating a View from code. Its default value is null.
defStyleAttrIntAn integer value that you usually pass when creating a View from code. Its default value is 0.
webViewClientKlarnaStandaloneWebViewClientIt's used to receive callbacks from the KlarnaStandaloneWebView. Its default value is null.
eventHandlerKlarnaEventHandlerIt's used to get notified of Klarna-related events. Its default value is null.
environmentKlarnaEnvironmentAn enumeration that is used to configure the endpoints and other behaviors that the KlarnaStandaloneWebView will be operating with. Its default value is null which means the environment will be production by default.
regionKlarnaRegionAn enumeration that defines the regional API endpoints to which the KlarnaStandaloneWebView will send/receive requests. Its default value is null which means the region will be EU by default.
themeKlarnaThemeAn enumeration that defines the theming for the Klarna-related components that are displayed inside the KlarnaStandaloneWebView. Its default value is null which means it will be light by default.
resourceEndpointKlarnaResourceEndpointAn enumeration that defines the cloud provider to which the KlarnaStandaloneWebView will send/receive requests. Please note that this should not be changed or overridden. It's default value is null.
returnURLStringThe return URL which is used for navigating users back to your app if necessary. Its default value is null.

As previously mentioned, the KlarnaStandaloneWebView can be perceived as a specialized WebView developed specifically for displaying Klarna-related content. Consequently, it inherits many methods and properties from the standard WebView with the addition of some Klarna-specific methods and properties.

In essence, this means that while the KlarnaStandaloneWebView functions similarly to a typical WebView and maintains its broad functionality, it also includes certain distinct features that cater specifically to the Klarna content, enhancing its usability and performance within a Klarna context.

Below is a set of methods from the KlarnaStandaloneWebView that are also available in a standard WebView. Please be aware that this list is not comprehensive, serving only as a highlight of commonly shared methods:

  • loadUrl
  • postUrl
  • loadData
  • loadDataWithBaseUrl
  • reload
  • stopLoading
  • goBack
  • goForward
  • canGoBack
  • canGoForward
  • clearCache

Below is a set of methods and properties from the KlarnaStandaloneWebView that are Klarna-specific. Please be aware that this list is not exhaustive.

  • eventHandler: a mutable property that allows setting or getting the KlarnaEventHandler.
  • loggingLevel: a mutable property that allows setting or getting the KlarnaLoggingLevel. You can use this property to set the logging level of the KlarnaStandaloneWebView.
  • productOptions: a mutable property that allows setting the options for some of the Klarna products.
  • sendEvent: a method that can be used to send a message to a Klarna component which is loaded in the KlarnaStandaloneWebView.