Handle step-up scenario

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:

  1. The customer clicks the Klarna Payment button.
  2. The initiate JavaScript function attached to the Klarna Payment button is triggered.
  3. Acquiring Partner’s backend calls Klarna’s Payment Authorize API.
  4. Klarna returns STEP_UP_REQUIRED and a payment_request_id
  5. The initiate function returns a promise resolving to the the paymentRequestId object.
  6. The customer enters the Klarna Purchase Journey and completes authentication/payment selection.
  7. Klarna redirects the customer back to the Partner.
High level visualization of the Authorization of the Payment with Klarna

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

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

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 nameDescription
payment_request_referenceReference to the payment session or equivalent resource on the Acquiring Partner's side. Helps match Klarna payment requests with internal records.
customer_interaction_configConfiguration properties for supporting step-up scenario. It contains:

Sample request

JSON
{
  "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:

JSON
{
  "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

JAVASCRIPT
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 initiationModeis a parameter which controls how the Klarna Purchase Journey is launched (redirect / modal window) on different devices (mobile/desktop/native):

initiationModeDescription
DEVICE_BESTAutomatically selects the best way to launch the Klarna Purchase Journey depending on the device - this is the default and recommended value:
  • Mobile: Always redirect
  • Desktop: pop-up if possible, fallback to redirect.
  • Native webview: Always redirect
Note: for this initiationMode, a return_url is required in the step_up_config object when calling the Payment Authorize API.
ON_PAGEThe 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.
REDIRECTThe 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:

  • Authenticate with Klarna (via login, OTP, etc.)
  • Choose the payment method (Pay in N, Pay Later, etc)
  • Accept the payment.
Phone collection in the Klarna Purchase Journey

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.

Implementation notes for Partners:

  • Ensure the app is set up to register a URL scheme (e.g., yourapp://klarna) or universal link that resumes the payment flow.
  • Klarna uses this URI after the customer completes a native app-based flow (e.g., biometric auth in a bank app or Klarna app login).
  • Partners are expected to open the integrating mobile application in its last state (no state changes or deeplink navigations).

After the customer completes Klarna’s Purchase Journey, whether via web browser or mobile app, Klarna performs two critical actions:

  1. Redirection to 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.
  2. Issuance of 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:

  • Retrieve the payment_token - use of Klarna webhook system is required
  • Finalize the transaction
  • Redirect the customer to the Partner’s confirmation page

The 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 handlerPurpose
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.

ParameterDefinition
paymentRequestIdUnique identifier of this payment request
stateCurrent state of the payment request
previousStateThe previous state of the payment request
stateReasonThe reason field may be used to determine why the payment request is in its current state.
stateContextState 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.

  • Configure step_up_config with valid return_url and app_return_url when calling the Payment Authorize API
  • Handle Klarna’s STEP_UP_REQUIRED response by extracting the payment_request_id and passing it to the frontend.
  • Prefer internal return_url to finalize transaction before redirecting to Partner UI.
  • Register SDK event handlers (complete, abort, error).