@foodello/capacitor-klarna-kco NPM

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": {
      "returnUrlIos": "your-app-scheme://",
      "returnUrlAndroid": "your-app-scheme://",
      "environment": "playground", // Optional
      "handleEPM": false, // Optional
      "handleValidationErrors": false, // Optional
      "region": "eu", // Optional
      "theme": "light" // Optional
    }
  }
}

Android modifications

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/'
  }
}
```
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

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()

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

addListener(EventsEnum.External, ...)

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

Listen for when the external payment method is set.

Param	Type
`eventName`	EventsEnum.External
`listenerFunc`	(data: { url: string; path: string; }) => 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>

EventData

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

{

}

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'