Klarna Checkout integration to Capacitor.js for loading Checkout widget inside Capacitor app.
yarn add @foodello/capacitor-klarna-kco
or
npm install @foodello/capacitor-klarna-kco
Then run
npx cap sync
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
}
}
}
- 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
Default is
ext { ... klarnaSdkVersion: 'x.x.x' }
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">
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 */})
https://docs.klarna.com/in-app/
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() => Promise<void>
Initializes Klarna SDK with the configs.
Since: 2.0.0
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() => Promise<CallResult>
Open KCO view which includes the snippet.
Returns: Promise<CallResult>
Since: 2.0.0
close() => Promise<CallResult>
Close KCO view including the snippet.
Returns: Promise<CallResult>
Since: 2.0.0
destroy() => Promise<void>
Destroy Klarna SDK instance.
Since: 1.0.0
resume() => Promise<KlarnaCallResult>
Resume interactions on Klarna Checkout widget.
Returns: Promise<KlarnaCallResult>
Since: 1.0.0
suspend() => Promise<KlarnaCallResult>
Suspend interactions on Klarna Checkout widget.
Returns: Promise<KlarnaCallResult>
Since: 1.0.0
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(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(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(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(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(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(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(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(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(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(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(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(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(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
Prop | Type | Description | Since |
---|---|---|---|
status |
boolean |
Return status of the call | 2.0.0 |
message |
string |
Corresponding message for status value | 2.0.0 |
Prop | Type | Description | Since |
---|---|---|---|
snippet |
string |
The KCO frame's snippet from Klarna | 2.0.0 |
Prop | Type |
---|---|
result |
'invoked' |
Prop | Type |
---|---|
remove |
() => Promise<void> |
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; } |
Construct a type with a set of properties K of type T
{
[P in K]: T;
}
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' |
Members | Value |
---|---|
Verbose |
verbose |
Error |
error |
Off |
off |
Members | Value |
---|---|
NA |
na |
OC |
oc |
EU |
eu |
Members | Value |
---|---|
Demo |
demo |
Playground |
playground |
Staging |
staging |
Production |
production |
Members | Value |
---|---|
Automatic |
automatic |
Dark |
dark |
Light |
light |