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

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, ...)
• addListener(EventsEnum.External, ...)
• 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>

Listen for when the payment created.

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

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

addListener(EventsEnum.External, ...)

addListener(eventName: EventsEnum.External, listenerFunc: (data: EventData[EventsEnum.External]) => void) => Promise<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>

Since: 2.0.0

addListener(EventsEnum.Load, ...)

addListener(eventName: EventsEnum.Load, listenerFunc: (data: EventData[EventsEnum.Load]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.UserInteracted, ...)

addListener(eventName: EventsEnum.UserInteracted, listenerFunc: (data: EventData[EventsEnum.UserInteracted]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.Customer, ...)

addListener(eventName: EventsEnum.Customer, listenerFunc: (data: EventData[EventsEnum.Customer]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.Change, ...)

addListener(eventName: EventsEnum.Change, listenerFunc: (data: EventData[EventsEnum.Change]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.BillingAddressChange, ...)

addListener(eventName: EventsEnum.BillingAddressChange, listenerFunc: (data: EventData[EventsEnum.BillingAddressChange]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.ShippingAddressChange, ...)

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

Listen for when shipping address was submitted.

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

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

addListener(EventsEnum.ShippingOptionChanged, ...)

addListener(eventName: EventsEnum.ShippingOptionChanged, listenerFunc: (data: EventData[EventsEnum.ShippingOptionChanged]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.OrderTotalChange, ...)

addListener(eventName: EventsEnum.OrderTotalChange, listenerFunc: (data: EventData[EventsEnum.OrderTotalChange]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.CheckboxChange, ...)

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

Listen for when a checkbox was checked/unchecked.

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

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

addListener(EventsEnum.NetworkError, ...)

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

Listen for network error in KCO iframe.

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

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

addListener(EventsEnum.RedirectInitiated, ...)

addListener(eventName: EventsEnum.RedirectInitiated, listenerFunc: (data: EventData[EventsEnum.RedirectInitiated]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.LoadConfirmation, ...)

addListener(eventName: EventsEnum.LoadConfirmation, listenerFunc: (data: EventData[EventsEnum.LoadConfirmation]) => void) => Promise<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>

Since: 1.0.0

addListener(EventsEnum.External, ...)

addListener(eventName: EventsEnum.External, listenerFunc: (data: EventData[EventsEnum.External]) => void) => Promise<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>

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

{ [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 |