Klarna Docs - Klarna Checkout Android Migration Guide

Klarna Checkout Android Migration Guide

Klarna Checkout SDK was previously a standalone library, but now it has become part of the Klarna Mobile SDK.

To integrate the new Klarna Mobile SDK, you first need to change the Gradle dependency:

Before (Klarna Checkout SDK)After (Klarna Mobile SDK)
implementation 'com.klarna.checkout:sdk:<VERSION>'implementation 'com.klarna.mobile:sdk:<VERSION>'

Also, if you’re using Java, add compile options to support Java version 1.8 in the app's build.gradle:

KOTLIN
android {
   ...
   compileOptions {
      sourceCompatibility JavaVersion.VERSION_1_8
      targetCompatibility JavaVersion.VERSION_1_8
   }
   ...
}

Before:
In the legacy Klarna Checkout SDK, you need to create an instance of the SDK, get the view object from the SDK instance, and manually add it to your view hierarchy:

KOTLIN
val klarnaCheckout = KlarnaCheckout(this, returnURL)
val checkoutView = klarnaCheckout.view
val container: ViewGroup = findViewById(R.id.checkoutContainer)
container.addView(checkoutView)

After:
In the Klarna Mobile SDK, you can either create the KlarnaCheckoutView in your XML file and get a reference to it, or you can create an instance programmatically, add it to your view hierarchy, and set its properties.

Via XML:

KOTLIN
<com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView
    ...
android:id="@+id/checkoutView"/>
KOTLIN
val checkoutView: KlarnaCheckoutView = findViewById(R.id.checkoutView)

Via code:

KOTLIN
val checkoutView = KlarnaCheckoutView(context = this, returnURL = returnUrl, eventHandler = eventHandler)
val container: ViewGroup = findViewById(R.id.checkoutContainer)
container.addView(checkoutView)

Before:
In the legacy Klarna Checkout SDK, you provide the return URL value in the constructor:

KOTLIN
val klarnaCheckout = KlarnaCheckout(this, returnURL)

After:
In the Klarna Mobile SDK, you can either set the returl URL value as an XML attribute:

KOTLIN
<com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:klarnaReturnUrl="test://">

or provide it directly in the constructor:

KOTLIN
val checkoutView = KlarnaCheckoutView(context = this, returnURL = returnUrl, eventHandler = eventHandler)

Before:
In the legacy Klarna Checkout SDK, you would set a `SignalListener` object on the Checkout to listen to the different events:

KOTLIN
klarnaCheckout.setSignalListener { eventName, jsonObject ->
   Log.d(TAG, “Received event: $eventName”)
   val value = jsonObject.getString(“param”)
}

After:
In the Klarna Mobile SDK, you need to provide a `KlarnaEventHandler` object in the constructor or set this property on the Checkout SDK to listen to events and error messages:

KOTLIN
checkoutView.eventHandler = object : KlarnaEventHandler {
   override fun onEvent(klarnaComponent: KlarnaComponent, event: KlarnaProductEvent) {
      Log.d(TAG, “Received event: ${event.action}”)
      val value = event.params[“param”]
   }
   override fun onError(klarnaComponent: KlarnaComponent, error: KlarnaMobileSDKError) {
      Log.e(TAG, “Received error: ${error.message}”)
   }
}

In both SDKs, you need to call the same `setSnippet` function:

KOTLIN
checkout.setSnippet(snippet)

In both SDKs, you need to call the same `resume` and `suspend` functions:

KOTLIN
checkout.resume()
checkout.suspend()

Before:
In the legacy Klarna Checkout SDK, you need to set a boolean flag on the checkout instance to configure if you want to handle external payment methods or not:

KOTLIN
checkout.merchantHandlesEPM = true

Then you would receive the corresponding signal in your `signalListener` callback:

KOTLIN
override fun onSignal(eventName: String, jsonObject: JSONObject) {
   if (eventName == "external") {
      val externalPaymentUrl = jsonObject.getString("uri")
      openExternalPayment(externalPaymentUrl)
   }
}

After:
In the Klarna Mobile SDK, you need to access and set this flag inside a new property called `checkoutOptions`:

KOTLIN
checkout.checkoutOptions.merchantHandlesEPM = true

Then you would receive the corresponding signal in your `klarnaEventHandler` callback:

KOTLIN
override fun onEvent(klarnaComponent: KlarnaComponent, event: KlarnaProductEvent) {
   if (event.action == "external") {
      val externalPaymentUrl = event.params["uri"]
      openExternalPayment(externalPaymentUrl)
   }
}

Before:
In the legacy Klarna Checkout SDK, you need to set a boolean flag on the checkout instance to configure if you want to handle validation errors or not:

KOTLIN
checkout.merchantHandlesValidationErrors = true

Then you would receive the corresponding signal in your `signalListener` callback:

KOTLIN
override fun onSignal(eventName: String, jsonObject: JSONObject) {
   if (eventName == "validation_error") {
      val errorType = jsonObject.getString("error_type")
      val errorText = jsonObject.getString(“error_text”)
      handleValidationError(errorType, errorText)
   }
}

After:
In the Klarna Mobile SDK, you need to access and set this flag inside a new property called `checkoutOptions`:

KOTLIN
checkout.checkoutOptions.merchantHandlesValidationErrors = true

Then you would receive the corresponding signal in your `klarnaEventHandler` callback:

KOTLIN
override fun onEvent(klarnaComponent: KlarnaComponent, event: KlarnaProductEvent) {
   if (event.action == "validation_error") {
      val errorType = event.params["error_type"]
      val errorText = event.params[“error_text”] 
      handleValidationError(errorType, errorText)
   }
}

Before:
In the legacy Klarna Checkout SDK, you needed to create an instance of `KlarnaCheckout` and then set your `WebView` object to the SDK. Then you could load your Klarna Checkout integration in a URL via this `WebView`:

KOTLIN
val checkout = KlarnaCheckout(this, returnURL)
checkout.setWebView(myWebView)
myWebView.loadUrl("https://www.example.store/checkout")

After:
In the Klarna Mobile SDK, you need to create an instance of `KlarnaHybridSDK` and then set your `WebView` object to the SDK. Then you could load your Klarna Checkout integration in a URL via this `WebView`:

KOTLIN
val klarnaHybridSDK = KlarnaHybridSDK(returnUrl, eventCallback. fullscreenEventCallback)
klarnaHybridSDK.addWebView(myWebView)
myWebView.loadUrl("https://www.example.store/checkout")

You would also need to notify the SDK whenever a new page is loaded:

KOTLIN
class MyWebViewClient(): WebViewClient() {
   override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
      return !klarnaHybridSDK.shouldFollowNavigation(url)
   }
}

To know more about the Hybrid integration using Klarna Mobile SDK and the callbacks, please take a look at this page.