Capacitor Klarna Checkout

Klarna Checkout integration to Capacitor.js for loading Checkout widget inside Capacitor app.

Installation

yarn add @foodello/capacitor-klarna-kco

or

npm install @foodello/capacitor-klarna-kco

Then run

npx cap sync

Setup

Required: Include configuration to capacitor.config.json

{
  "plugins": {
    "KlarnaKco": {
      "iosReturnUrl": "your-app-scheme://",
      "androidReturnUrl": "your-app-scheme://",
      "environment": "playground", // Optional
      "handleEPM": false, // Optional
      "handleValidationErrors": false, // Optional
      "region": "eu", // Optional
      "theme": "light" // Optional
    }
  }
}

Android modifications

1. Edit your application level build.gradle file and add the following repository to your repositories section:

   repositories {
    ....
    maven {
        url 'https://x.klarnacdn.net/mobile-sdk/'
    }
   }

2. If you are willing to change SDK version, add new version to your variables.gradle

   ext {
    ...
    klarnaSdkVersion: 'x.x.x'
   }

   Default is 2.5.2

3. Check that your main activity has intent filter and it supports return URL scheme defined in capacitor.config.json. AndroidManifest.xml:

   <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="<your-app-scheme>" />
    <data android:host="<your-app-host>" />
   </intent-filter>

Note: The hosting Activity should be using launchMode of singleTask or singleTop to prevent a new instance from being created when returning from an external application. This should be singleTask if you have not modified this by yourself.

<activity android:launchMode="singleTask|singleTop">

Usage

Import plugin to your application

import { KlarnaKco } from "@foodello/capacitor-klarna-kco";

Remember to attach listeners to the events you are willing to handle. For example in order to perform navigation inside your application, listen complete -event:

KlarnaKco.addListener('complete', ({ url }) => {/* PERFORM NAVIGATION */})

Check Klarna's documentation for more information

https://docs.klarna.com/in-app/

API

LoggingLevelsEnum

RegionsEnum

EnvironmentsEnum

ThemesEnum