Adding Klarna payments to your application is as easy as adding a view and performing the payment operations on it.
![]() | ![]() | ![]() | ![]() |
Your native checkout screen in default state. | Your native checkout screen when Klarna is selected as payment method. | Klarna purchase flow starts when customer confirms to Continue with Klarna. | Your native order confirmation screen after a successful payment. |
client_token
to your app.When you integrate Klarna payments into your online store, your customers see Klarna as an option when they select a payment method for their purchases. If your customers select Klarna for their purchase, they are redirected to log into their Klarna account.
Your customers select their preferred Klarna payment option (pay now, pay later, pay in parts) once they're logged into their Klarna account. We handle the Klarna account user flow, so you don't have to worry about it.
Before you start integrating Klarna payments, there are a few things you need to prepare in advance:
When your customer wants to pay with Klarna, you have to open a payment session and share the shopping cart details in a POST
request to the {apiURL}/payments/v1/sessions
endpoint. In that request, you also specify if the payment is one-time or recurring.
Once you start a payment session, it stays open for 48 hours or until you place an order. You can also send a separate POST
request to cancel the session.
Klarna payments API uses HTTP basic authentication. To authenticate, use your API credentials that consist of:
If you're using an API platform that lets you store your credentials, you can add them in relevant fields. Otherwise, make sure to include the Base64-encoded username:password in the Authorization header field of each API request, as shown below.
Authorization: Basic pwhcueUff0MmwLShJiBE9JHA==
A sample authorization request header with Base64-encoded credentials.
To get a success response, include the following required parameters in your POST {apiURL}/payments/v1/sessions
request.
Parameter ! style="vertical-align:middle;text-align:center;width:30px;" |Required | Description |
---|---|
locale | The language of information presented on the Klarna widget. Learn more about using locale in API calls. |
purchase_country ![]() | The country where the purchase is made. Learn more about supported countries. |
purchase_currency ![]() | The currency in which the customer is charged. Learn more about supported currencies. |
order_amount ![]() | The total price of the order, including tax and discounts. |
order_lines ![]() | The details of order lines in the purchase. |
intent | The purpose of the payment session. |
merchant_urls.authorization | Get a callback once the customer has completed the flow and you can create an order. |
In response to a create session call, you receive:
session_id
, a payment session identifier you can use to [ update the session] and [ retrieve session] detailsclient_token
, a token you pass to the JavaScript SDK or Mobile SDK(Android, iOS and React Native) to launch the Klarna widgetpayment_method_categories
, an array that lists the grouped Klarna payment methods available for the session. We can respond with one or more categories depending on the market and account configuration.{
"session_id": "068df369-13a7-4d47-a564-62f8408bb760",
"client_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjAwMDAwMDAwMDAtMDAwMDAtMDAwMC0wMDAwMDAwMC0wMDAwIiwidXJsIjoiaHR0cHM6Ly9jcmVkaXQtZXUua2xhcm5hLmNvbSJ9.A_rHWMSXQN2NRNGYTREBTkGwYwtm-sulkSDMvlJL87M",
"payment_method_categories": [
{
"identifier": "klarna"
"name" : "Pay with Klarna",
"asset_urls" : {
"descriptive" : "https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg",
"standard" : "https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
A sample success response to the create session call.
If your request doesn't pass our validation, you'll receive an error response.
{
"correlation_id": "6a9b1cb1-73a3-4936-a030-481ba4bb203b",
"error_code": "BAD_VALUE",
"error_messages": [
"Bad value: order_lines"
]
}
A sample error response caused by incorrect order line details.
Go to Error Handling to learn more about common errors and troubleshooting suggestions. You can use the value in correlation_id
to find entries related to the request under Logs in the Merchant portal.
If you want to add the SDK via npm
use the following to add library dependency:
npm install react-native-klarna-inapp-sdk --save
If you are using yarn, then use the following to add library dependency:
yarn add react-native-klarna-inapp-sdk
For installing native dependencies for iOS, go to your ios
directory and run pod install
.
You need to add a reference to the repository in your own app’s build.gradle which can be done by adding the lines between the comments below:
allprojects {
repositories {
...
// Required configuration to fetch native Android SDK
maven {
url 'https://x.klarnacdn.net/mobile-sdk/'
}
}
}
Mobile SDK integrations might, at some point, open third-party applications. To automatically return the user, these third-party applications need to know how to build a return intent or URL.
To do that, you’ll need to provide the SDK with what we call the “Return URL” parameter. If you haven’t done so already, follow this documentation for Android and this documentation for iOS.
Klarna purchase flows might require authorizations in other applications (e.g. bank apps) or do a handover to the Klarna app. In such cases, a return URL to your application ensures seamless return to the flow in your app, hence setting up a return URL is required. It is expected that redirects to this URL should only open your application without any changes in the UI state, ensuring the customer can continue the flow prior to external navigation.
You can set up a Return URL app scheme to your application by configuring a custom URL scheme.
Important: The return URL string passed to Klarna must include ://
after the scheme name. For example, if you defined myApp
as the scheme, you must use "myApp://"
as the return URL argument to Klarna.
To avoid a Klarna specific app scheme, you can use a host in a common scheme for Klarna redirects, e.g. myApp://klarna-redirect
, this can allow you to differentiate and handle these redirect in your handler.
Considering the return URL is a constant value in Constants.klarnaReturnUrl
, you can handle redirects to your return URL as such:
Klarna flows on mobile utilize Application Queries for Klarna app schemes to offer seamless app handover experience to customers. In order for the SDK to check availability of the Klarna app, we need you to enable querying Klarna app on the device by adding Klarna app schemes to LSApplicationQueriesSchemes.
This can be configured easily in XCode by going to your project setting and under "Info"(alternatively this is also available in your Info.plist
file) you should see an entry list for Queried URL Schemes
, this list should contain the klarna
and klarnaconsent
schemes:
In order to use the SDK from your React Native application import it by:
import KlarnaPaymentView from 'react-native-klarna-inapp-sdk';
You can import the KlarnaPaymentView from the library. You’ll then be able to add it as a component to your app. This component exposes callbacks as props and methods you can call via the component’s ref.
The view will auto-size height-wise and grow to fill it’s containing view’s width.
You can add the view to your layout as shown below:
const paymentViewRef = useRef<KlarnaPaymentView>(null);
const createPaymentView = () => {
return (
<KlarnaPaymentView
ref={paymentViewRef}
style={styles.paymentView}
category={"klarna"}
returnUrl={'returnUrl://'}
onInitialized={() => {
Name | Type | Description |
---|---|---|
returnUrl | String | App scheme URL as defined in set up to return from external applications. |
category | String | Should always be set to "klarna" as it's the preferred payment category. |
onInitialized | () => {} | The initialize call succeeded. |
onLoaded | () => {} | The load call succeeded. |
onLoadedPaymentReview | () => {} | The load payment review call succeeded. |
onAuthorized | ({}) => {} | The authorize call succeeded. |
onReauthorized | ({}) => {} | The reauthorize call succeeded. |
onFinalized | ({}) => {} | The finalize call succeeded. |
onError | ({}) => {} | An error occurred. |
Before content is rendered into a payment view or an authorization, payment session with it's client token needs to be initialized. This can be done by calling initialize
and handling result in klarnaInitialized
.
// initilize with clientToken for session created from server-side
paymentViewRef.current?.initialize(props.clientToken);
Param | Type | Description |
---|---|---|
clientToken | String | The client token you get from Klarna Payments API session response. |
If successful, onInitialized
will be called in the property you supplied. If it’s not successful, onError
will be called instead.
onInitialized={() => {
paymentViewRed.current?.load() // optionally load payment widget upon initialize
}
If successful, klarnaInitialized
from KlarnaPaymentEventListener
will be called in the listener you supplied. If it’s not successful, klarnaFailed
will be called instead.
Load payment widget
Once you’ve initialized the view and you’re ready to display the payment widget, simply by calling load
.
// load optional payment widget
paymentViewRef.current?.load();
Param | Type | Description |
---|---|---|
sessionData | String undefined | An optional string to update the session. Formatted as JSON. |
If successful, onFinalized
will be called in property you supplied and for errors onError
will be called instead.
onFinalized={(approved, authToken) => {
if (authToken && approved) {
// finalize is successful, backend may create order
}
}
To continue with the purchase, you have to create an order in Klarna's system. This step takes place in the server side through the Klarna payments API.
Follow create an order documentation for server-side to complete your integration with an order.
Klarna Mobile SDK provides a full suite of mobile-first integrations, including Klarna products like:
![]() | ![]() | ![]() |
Sign in with Klarna | On-site Messaging | Express Checkout |
Complete your integration with