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

• initialize()
• setSnippet(...)
• open()
• close()
• destroy()
• resume()
• suspend()
• addListener(EventsEnum.Complete, ...)
• addListener(EventsEnum.External, ...)
• addListener(EventsEnum.Load, ...)
• addListener(EventsEnum.UserInteracted, ...)
• addListener(EventsEnum.Customer, ...)
• addListener(EventsEnum.Change, ...)
• addListener(EventsEnum.BillingAddressChange, ...)
• addListener(EventsEnum.ShippingAddressChange, ...)
• addListener(EventsEnum.ShippingOptionChanged, ...)
• addListener(EventsEnum.OrderTotalChange, ...)
• addListener(EventsEnum.CheckboxChange, ...)
• addListener(EventsEnum.NetworkError, ...)
• addListener(EventsEnum.RedirectInitiated, ...)
• addListener(EventsEnum.LoadConfirmation, ...)
• Interfaces
• Type Aliases
• Enums

initialize()

initialize() => Promise<void>

Initializes Klarna SDK with the configs.

Since: 2.0.0

---

setSnippet(...)

setSnippet(options: SetSnippetOptions) => Promise<CallResult>

Sets KCO snippet for Klarna SDK to load.

Param	Type
options	SetSnippetOptions

Returns: Promise<CallResult>

Since: 2.0.0

---

open()

open() => Promise<CallResult>

Open KCO view which includes the snippet.

Returns: Promise<CallResult>

Since: 2.0.0

---

close()

close() => Promise<CallResult>

Close KCO view including the snippet.

Returns: Promise<CallResult>

Since: 2.0.0

---

destroy()

destroy() => Promise<void>

Destroy Klarna SDK instance.

Since: 1.0.0

---

resume()

resume() => Promise<KlarnaCallResult>

Resume interactions on Klarna Checkout widget.

Returns: Promise<KlarnaCallResult>

Since: 1.0.0

---

suspend()

suspend() => Promise<KlarnaCallResult>

Suspend interactions on Klarna Checkout widget.

Returns: Promise<KlarnaCallResult>

Since: 1.0.0

---

addListener(EventsEnum.Complete, ...)

addListener(eventName: EventsEnum.Complete, listenerFunc: (data: EventData[EventsEnum.Complete]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the payment created.

Param	Type
eventName	EventsEnum.Complete
listenerFunc	(data: { url: string; path: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.External, ...)

addListener(eventName: EventsEnum.External, listenerFunc: (data: EventData[EventsEnum.External]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when KCO should redirect for external payment.

Requires handleEPM config to be true

Param	Type
eventName	EventsEnum.External
listenerFunc	(data: { url: string; path: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 2.0.0

---

addListener(EventsEnum.Load, ...)

addListener(eventName: EventsEnum.Load, listenerFunc: (data: EventData[EventsEnum.Load]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the KCO iframe has been created successfully.

Param	Type
eventName	EventsEnum.Load
listenerFunc	(data: { customer: { type: string; }; shipping_address: { country: string; postal_code: string; }; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.UserInteracted, ...)

addListener(eventName: EventsEnum.UserInteracted, listenerFunc: (data: EventData[EventsEnum.UserInteracted]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the user has interacted with the KCO iframe.

Param	Type
eventName	EventsEnum.UserInteracted
listenerFunc	(data: { type: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.Customer, ...)

addListener(eventName: EventsEnum.Customer, listenerFunc: (data: EventData[EventsEnum.Customer]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the user has interacted with the KCO iframe.

Param	Type
eventName	EventsEnum.Customer
listenerFunc	(data: { type: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.Change, ...)

addListener(eventName: EventsEnum.Change, listenerFunc: (data: EventData[EventsEnum.Change]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when organization type (B2B or Person) was changed.

Param	Type
eventName	EventsEnum.Change
listenerFunc	(data: { email: string; postal_code: string; country: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.BillingAddressChange, ...)

addListener(eventName: EventsEnum.BillingAddressChange, listenerFunc: (data: EventData[EventsEnum.BillingAddressChange]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when postal code, country or email was changed.

Param	Type
eventName	EventsEnum.BillingAddressChange
listenerFunc	(data: { postal_code: string; country: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.ShippingAddressChange, ...)

addListener(eventName: EventsEnum.ShippingAddressChange, listenerFunc: (data: EventData[EventsEnum.ShippingAddressChange]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when shipping address was submitted.

Param	Type
eventName	EventsEnum.ShippingAddressChange
listenerFunc	(data: { postal_code: string; country: string; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.ShippingOptionChanged, ...)

addListener(eventName: EventsEnum.ShippingOptionChanged, listenerFunc: (data: EventData[EventsEnum.ShippingOptionChanged]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the user has selected a new shipping option.

Param	Type
eventName	EventsEnum.ShippingOptionChanged
listenerFunc	(data: { description: string; id: string; name: string; price: number; promo: string; tax_amount: number; tax_rate: number; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.OrderTotalChange, ...)

addListener(eventName: EventsEnum.OrderTotalChange, listenerFunc: (data: EventData[EventsEnum.OrderTotalChange]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when we got changes on the cart from the merchant.

Param	Type
eventName	EventsEnum.OrderTotalChange
listenerFunc	(data: { order_total: number; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.CheckboxChange, ...)

addListener(eventName: EventsEnum.CheckboxChange, listenerFunc: (data: EventData[EventsEnum.CheckboxChange]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when a checkbox was checked/unchecked.

Param	Type
eventName	EventsEnum.CheckboxChange
listenerFunc	(data: { key: string; checked: boolean; }) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.NetworkError, ...)

addListener(eventName: EventsEnum.NetworkError, listenerFunc: (data: EventData[EventsEnum.NetworkError]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for network error in KCO iframe.

Param	Type
eventName	EventsEnum.NetworkError
listenerFunc	(data: Record<string, never>) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.RedirectInitiated, ...)

addListener(eventName: EventsEnum.RedirectInitiated, listenerFunc: (data: EventData[EventsEnum.RedirectInitiated]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the user is about to be redirected to the confirmation page.

Param	Type
eventName	EventsEnum.RedirectInitiated
listenerFunc	(data: true) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

addListener(EventsEnum.LoadConfirmation, ...)

addListener(eventName: EventsEnum.LoadConfirmation, listenerFunc: (data: EventData[EventsEnum.LoadConfirmation]) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Listen for when the confirmation iframe has been created succesfully.

Param	Type
eventName	EventsEnum.LoadConfirmation
listenerFunc	(data: Record<string, never>) => void

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Since: 1.0.0

---

Interfaces

CallResult

Prop	Type	Description	Since
status	boolean	Return status of the call	2.0.0
message	string	Corresponding message for status value	2.0.0

SetSnippetOptions

Prop	Type	Description	Since
snippet	string	The KCO frame's snippet from Klarna	2.0.0

KlarnaCallResult

Prop	Type
result	'invoked'

PluginListenerHandle

Prop	Type
remove	() => Promise<void>

Enums

Prop	Type
[EventsEnum.BillingAddressChange]	{ postal_code: string; country: string; }
[EventsEnum.Change]	{ email: string; postal_code: string; country: string; }
[EventsEnum.CheckboxChange]	{ key: string; checked: boolean; }
[EventsEnum.Complete]	{ url: string; path: string; }
[EventsEnum.Customer]	{ type: string; }
[EventsEnum.External]	{ url: string; path: string; }
[EventsEnum.LoadConfirmation]	Record<string, never>
[EventsEnum.Load]	{ customer: { type: string; }; shipping_address: { country: string; postal_code: string; }; }
[EventsEnum.NetworkError]	Record<string, never>
[EventsEnum.OrderTotalChange]	{ order_total: number; }
[EventsEnum.RedirectInitiated]	true
[EventsEnum.ShippingAddressChange]	{ postal_code: string; country: string; }
[EventsEnum.ShippingAddressUpdateError]	Record<string, never>
[EventsEnum.ShippingOptionChanged]	{ description: string; id: string; name: string; price: number; promo: string; tax_amount: number; tax_rate: number; }
[EventsEnum.UserInteracted]	{ type: string; }

Type Aliases

Record

Construct a type with a set of properties K of type T

{ [P in K]: T; }

Enums

EventsEnum

Members	Value
BillingAddressChange	'billing_address_change'
Change	'change'
CheckboxChange	'checkbox_change'
Complete	'complete'
Customer	'customer'
External	'external'
Load	'load'
LoadConfirmation	'load_confirmation'
NetworkError	'network_error'
OrderTotalChange	'order_total_change'
RedirectInitiated	'redirect_initiated'
ShippingAddressChange	'shipping_address_change'
ShippingAddressUpdateError	'shipping_address_update_error'
ShippingOptionChanged	'shipping_option_changed'
UserInteracted	'user_interacted'

LoggingLevelsEnum

Members	Value
Verbose	verbose
Error	error
Off	off

RegionsEnum

Members	Value
NA	na
OC	oc
EU	eu

EnvironmentsEnum

Members	Value
Demo	demo
Playground	playground
Staging	staging
Production	production

ThemesEnum

Members	Value
Automatic	automatic
Dark	dark
Light	light