Help customers complete payments securely by handling Klarna’s step-up authentication using the Purchase Journey. This guide breaks down how to integrate and respond when a step-up flow is triggered through the Klarna SDK.
When Klarna requires additional verification from the customer (e.g., login, authentication, or payment method selection), it returns a Payment Request in response to the Payment Authorize API call which the Klarna SDK needs to trigger the purchase journey.
As shown in the below diagram, the high level flow is the following:
initiate
JavaScript function attached to the Klarna Payment button is triggered.STEP_UP_REQUIRED
and a payment_request_id
initiate
function returns a promise resolving to the the paymentRequestId
object.To support the step-up scenario, Acquiring Partners must define return URLs when calling the Payment Authorize API.
return_url
: Klarna will always redirect the customer to this URL on a successful authorization. This could either be a URL from the Acquiring Partner who will handle the redirection logic or a URL collected from the Partner.website redirection
app_return_url
: The customer may be redirected to a third party app (bank app) or the Klarna app during the Klarna Purchase Journey on mobile environments. This url enables Klarna to return the customer back to the Partner’s mobile app.App handover diagram
When Acquiring Partners are already asking for a suitable return_url
or app_return_url
from the Partner, it is advised to not ask for a second one as this would increase the minimal integration requirements for Klarna to work.
Acquiring Partners must include a step_up_config
object when calling Klarna’s Payment Authorize API, and specify the following parameters:
Parameter name | Description |
---|---|
payment_request_reference | Reference to the payment session or equivalent resource on the Acquiring Partner's side. Helps match Klarna payment requests with internal records. |
customer_interaction_config | Configuration properties for supporting step-up scenario. It contains:
|
Sample request
{
"currency": "USD",
"supplementary_purchase_data": { .. },
"interoperability_data": "<serialized-json>",
"request_payment_transaction": {
"amount": 11800,
"payment_transaction_reference": "acquiring-partner-transaction-reference-1234"
},
"step_up_config": {
"payment_request_reference": "acquiring-partner-request-reference-1234",
When step-up is required, the Payment Authorize API response includes a payment_request_id
that must be passed to the frontend SDK:
{
"payment_transaction_response": {
"result": "STEP_UP_REQUIRED"
},
"payment_request": {
...
"state_context": {
"customer_interaction": {
"method": "HANDOVER",
"payment_request_id": "krn:payment:eu1:request:..."
The initiate function from the Klarna Payment button instance will return a promise that resolve to an object with the paymentRequestId
:
Sample code
const buttonConfig = {
initiate: () => {
//call to Klarna Payment Authorize API returns STEP_UP_REQUIRED
return { paymentRequestId: "krn:payment:eu1:request:5eb1.." }
},
initiationMode: "DEVICE_BEST", // Device-optimized payment initiation
}
// Render and mount the button with the assigned configuration
paymentPresentation.paymentButton.component(buttonConfig).mount("#klarna-button-container");
The initiationMode
is a parameter which controls how the Klarna Purchase Journey is launched (redirect / modal window) on different devices (mobile/desktop/native):
initiationMode | Description |
---|---|
DEVICE_BEST | Automatically selects the best way to launch the Klarna Purchase Journey depending on the device - this is the default and recommended value:
initiationMode , a return_url is required in the step_up_config object when calling the Payment Authorize API. |
ON_PAGE | The Klarna Purchase Journey is triggered on the same page. The customer never leaves the page. The Klarna Purchase Journey is open in a pop-up if possible and fallback to fullscreen iframe if necessary. |
REDIRECT | The customer will be redirected to the Klarna Purchase Journey.Note: for this initiationMode , a return_url is required in the step_up_config object when calling the Payment Authorize API. |
The Klarna Purchase Journey enables the customer to:
Phone collection in the Klarna Purchase Journey
If the Klarna Purchase Journey requires a handover to another app (e.g., Klarna app, bank app), Klarna will use the provided app_return_url
to return the customer to the Partner’s mobile app.
After the customer completes Klarna’s Purchase Journey, whether via web browser or mobile app, Klarna performs two critical actions:
return_url
: Klarna redirects the customer to the return_url provided in the customer_interaction_config
object. This URL should guide the customer back into your or the Partner’s frontend experience.payment_token
: Klarna issues a payment_token
to the Acquiring Partner, which is required to finalize the payment. This part will be covered in the following section - Monitor the payment request state.Best practices for return_url
Klarna recommends that Acquiring Partners use an internal return_url
(rather than the Partner's frontend URL) when calling the Payment Authorize API. This enables the Acquiring Partner to:
payment_token
- use of Klarna webhook system is requiredThe KlarnaPayment
SDK interface enables Acquiring Partners to register event handlers to follow the different stages of the purchase and provide the best user experience to consumers.
Event handler | Purpose |
---|---|
on("complete", callback) | Detect when the customer has accepted the purchase.During a redirection flow the complete handler will trigger once your page has loaded on the success page. Pending updates are triggered even if the event handler is registered after the page has loaded to avoid need for polling. |
on("abort", callback) | Detect whenever the customer aborts the Klarna purchase journey. |
on("error", callback) | Detect errors during the payment request lifecycle. If the error event handler is defined, all errors will be emitted to it instead of thrown upwards. |
These event handlers allow you to access various properties of the ongoing paymentRequest
as defined in the below table. This access allows developers to handle payment requests with greater precision and awareness of the payment’s current state.
Parameter | Definition |
---|---|
paymentRequestId | Unique identifier of this payment request |
state | Current state of the payment request |
previousState | The previous state of the payment request |
stateReason | The reason field may be used to determine why the payment request is in its current state. |
stateContext | State specific context for the ongoing state. The paymentToken will be stored in this object once the payment request reaches the state COMPLETED |
Sample code:
Event though the paymentToken
can technically be retrieved through the on("complete",callback)
, Acquiring Partners are required to primarily retrieve it by subscribing to webhooks.
step_up_config
with valid return_url
and app_return_url
when calling the Payment Authorize APISTEP_UP_REQUIRED
response by extracting the payment_request_id
and passing it to the frontend.return_url
to finalize transaction before redirecting to Partner UI.