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:
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:
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:
<com.klarna.mobile.sdk.api.checkout.KlarnaCheckoutView
...
android:id="@+id/checkoutView"/>
val checkoutView: KlarnaCheckoutView = findViewById(R.id.checkoutView)
Via code:
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:
val klarnaCheckout = KlarnaCheckout(this, returnURL)
After:
In the Klarna Mobile SDK, you can either set the returl URL value as an XML attribute:
<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:
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:
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:
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:
checkout.setSnippet(snippet)
In both SDKs, you need to call the same `resume` and `suspend` functions:
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:
checkout.merchantHandlesEPM = true
Then you would receive the corresponding signal in your `signalListener` callback:
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`:
checkout.checkoutOptions.merchantHandlesEPM = true
Then you would receive the corresponding signal in your `klarnaEventHandler` callback:
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:
checkout.merchantHandlesValidationErrors = true
Then you would receive the corresponding signal in your `signalListener` callback:
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`:
checkout.checkoutOptions.merchantHandlesValidationErrors = true
Then you would receive the corresponding signal in your `klarnaEventHandler` callback:
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`:
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`:
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:
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.