Payment Authorization for Hosted Checkout integration
Integrate Klarna's Payment Authorize API for hosted checkout and embedded elements. This guide covers backend implementation for handling authorization results, step-up flows, and finalizing payments.
This guide is part of the Payment Authorization flow for hosted checkout and embedded elements integration path. It covers the backend implementation — what the Acquiring Partner's server does after the customer interacts with the Klarna payment form on the frontend.
Where this fits in the integration flow:
Payment Presentation — Your frontend presents Klarna payment methods and collects the customer's selection (previous step)
Authorize the payment (backend) — Your backend receives the frontend request and calls Klarna's Payment Authorize API (this step)
Before implementing the backend endpoint, ensure you have:
A working Payment Presentation implementation — your frontend can present Klarna payment methods and collect the customer's selection
The ability to collect payment context from the Partner (amount, currency, supplementary_purchase_data, klarna_network_session_token, klarna_network_data)
Your backend's role: Your backend receives the authorization request from the frontend, calls Klarna's authorizePayment API, and returns the result so the frontend can proceed accordingly.
The backend authorization flow starts after the customer selects a Klarna payment method in your checkout. Your frontend triggers the initiate callback, which calls your backend. Your backend then forwards the request to Klarna and returns the result.
The integration process consists of the following key steps:
1.
Your frontend triggers the initiate callback: The Klarna web SDK calls your configured callback when the customer initiates a payment authorization.
2.
Your backend receives the authorization request: Accept klarna_network_session_token and payment_option_id from your frontend
3.
Your backend calls the authorizePayment endpoint: Forward the payment context to Klarna
4.
Your backend handles authorization results: Process STEP_UP_REQUIRED, APPROVED, or DECLINED outcomes and return the result to your frontend
5.
Your frontend configures initiationMode: Control how the Klarna Web SDK launches the Klarna Purchase Journey for step-up
6.
Your backend monitors step-up completion: Detect when the customer completes the Klarna Purchase Journey (for STEP_UP_REQUIRED)
7.
Your backend finalizes the authorization: Complete the authorization after the customer finishes step-up
sequenceDiagram
autonumber
participant Customer
participant APFrontend as Acquiring Partner (Frontend)
participant APBackend as Acquiring Partner (Backend)
participant KlarnaAuth as Klarna Payment Authorize API
participant WebSDK as Klarna Web SDK
Note over Customer,WebSDK: Payment Presentation integration (previous step)
Note over Customer,APFrontend: Customer clicks Klarna payment button
Customer->>APFrontend: Click payment button
APFrontend->>WebSDK: initiate callback triggered
WebSDK->>APFrontend: Provide klarnaNetworkSessionToken and paymentOptionId
Note over APFrontend,APBackend: Step 1: Initiate callback triggered
Note over APFrontend,APBackend: Step 2: Frontend calls backend
APFrontend->>APBackend: POST /api/authorize-payment
Note over APBackend,KlarnaAuth: Step 3: Backend calls Klarna API
APBackend->>KlarnaAuth: POST /payment/authorize
KlarnaAuth-->>APBackend: Authorization result
Note over APBackend,APFrontend: Step 4: Handle results and return response
alt result: APPROVED
APBackend-->>APFrontend: Return APPROVED with successUrl
APFrontend->>WebSDK: Return successUrl
WebSDK->>Customer: Redirect to confirmation
else result: STEP_UP_REQUIRED
APBackend-->>APFrontend: Return STEP_UP_REQUIRED with paymentRequestUrl
APFrontend->>WebSDK: Return paymentRequestUrl
WebSDK->>Customer: Launch Klarna Purchase Journey
Note over Customer,WebSDK: Customer completes authentication
WebSDK->>Customer: Redirect to confirmation
else result: DECLINED
APBackend-->>APFrontend: Return DECLINED
APFrontend->>Customer: Handle rejection (offer alternatives)
end
When the customer selects a Klarna payment method and clicks the Klarna payment button in your checkout, the Klarna web SDK triggers the initiate callback function configured in your Payment Presentation. This callback calls your backend authorization endpoint.
Implement the initiate callback to call your backend endpoint and handle authorization results. The frontend is responsible for:
1.
Calling the backend authorization endpoint with the klarnaNetworkSessionToken and paymentOptionId
2.
Handling the authorization response based on the result field
3.
Returning the paymentRequestUrl to the Klarna Web SDK if step-up is required (the SDK handles launching the Klarna Purchase Journey)
4.
Redirecting on success or displaying errors
JS
1
2
3
4
5
6
7
8
9
10
asyncfunctioninitiateKlarnaPayment(klarnaNetworkSessionToken, paymentOptionId) {
try {
// 1) Ask your backend to authorize the paymentconst response = awaitfetch('/api/authorize-payment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ klarnaNetworkSessionToken, paymentOptionId })
});
if (!response.ok) thrownewError('Network or server error');
The following steps in this guide explain how to implement the backend endpoint that this initiate callback calls.
Forward the complete payment context to Klarna using the Payment Authorize API. Include all payment data collected from the Partner (same as used during Payment Presentation).
The authorizePayment API is used to start the payment process on Klarna whether they are with or without customer presence.
Use the same amount, currency, and supplementary_purchase_data values collected from the Partner (same as used during Payment Presentation)
Always configure step_up_config with HANDOVER method to allow the customer to complete authentication when needed
Optionally set step_up_config.customer_interaction_config.interaction_expiry to override the default 3-hour Payment Request lifetime. See Custom Payment Request expiry.
The authorizePayment API returns one of three possible results in the payment_transaction_response.result field. Your backend reads this field and returns the appropriate data to your frontend so it can proceed.
The result field indicates the outcome and determines your next action. It has the following possible values:
Result
Description
Next steps
STEP_UP_REQUIRED
Additional customer interaction is needed to complete the authorization (step-up scenario). A payment_request is created.
Handle this result when Klarna requires additional customer interaction to complete authorization:
Return the payment_request_url to your frontend. The Klarna Web SDK launches the Klarna Purchase Journey for the customer to complete.
The customer (who must be present) completes the Klarna Purchase Journey.
Wait for step-up completion before finalizing the Payment Authorization.
Return URLs must be provided when calling authorizePayment to redirect the customer after they complete or stop the Klarna Purchase Journey.
APPROVED
The authorization succeeded and a payment_transaction was created.
The Payment Authorization is complete. Handle this result when Klarna authorizes the payment without requiring customer interaction:
Read and store the payment_transaction as well as klarna_network_response_data from the response if present.
Return the klarna_network_response_data to the Partner without modification if present.
When the frontend receives STEP_UP_REQUIRED with the paymentRequestUrl, the Klarna Web SDK automatically launches the Klarna Purchase Journey (see Step 5).
Acquiring Partners must include return URLs in the step_up_config when calling authorizePayment to enable the step-up scenario.
These URLs, set inside the customer_interaction_config object, tell Klarna where to redirect the customer after they complete or stop the Klarna Purchase Journey.
If the Klarna Purchase Journey is launched in a web environment, Klarna redirects the customer to the return_url after they finish — whether they complete or stop the flow. This can be a URL managed by the Acquiring Partner (which handles redirection logic) or one collected directly from the Partner.
On mobile, the customer may be redirected to a third-party app (such as a bank app) or the Klarna app during the Klarna Purchase Journey. The app_return_url brings the customer back to the Partner's mobile app when this happens.
Partners must register a URL scheme (e.g., yourapp://klarna) or a universal link that resumes the payment flow. Klarna invokes this URL after the customer completes a native app-based step, such as biometric authentication or Klarna app login. Partners are expected to resume the mobile app in its last state without applying state changes or deep link navigations.
The return_url and app_return_url are not mutually exclusive. Depending on the device and environment, either or both may be triggered:
Scenario
Description
Pure web flow
The customer starts the Klarna Purchase Journey in a desktop browser. After completing the flow, Klarna redirects them to return_url.
App-to-app flow
The Partner's native app opens the Klarna Purchase Journey using a universal link. If the Klarna app is installed, the customer goes directly into it. After completion, Klarna redirects them to app_return_url.
WebView flow with app handover
The Partner's native app starts the Klarna Purchase Journey in a System WebView. If the customer must authenticate via an external banking app, app_return_url returns them to the Partner's app mid-flow. They then resume in the WebView and, on completion, are redirected to return_url.
If the Acquiring Partner already collects a suitable return_url or app_return_url from the Partner, do not request a second one — this would increase the minimum integration requirements for Klarna to work.
A step-up occurs when Klarna requires additional customer interaction to complete a Payment Authorization — for example, when the customer needs to log in, authenticate, or select a payment method.
When step-up is triggered, authorizePayment returns a STEP_UP_REQUIRED result along with a Payment Request containing the payment_request_url which is required for the Klarna Web SDK to launch the Klarna Purchase Journey.
The Klarna web SDK launches the Klarna Purchase Journey through the initiate function on the Klarna Payment button. The function returns a promise that resolves to an object containing the paymentRequestUrl:
JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
const buttonConfig = {
initiate: () => {
// Call to Payment Authorize API returns STEP_UP_REQUIREDreturn { paymentRequestUrl: "https://pay.test.klarna.com/na/requests/6bbf6775-[...]/start" };
},
initiationMode: "DEVICE_BEST", // "DEVICE_BEST" (default) | "ON_PAGE" | "REDIRECT"
};
// Render and mount the button with the assigned configuration
paymentPresentation.paymentButton
The initiationMode parameter controls how the Klarna Purchase Journey is launched when your backend returns STEP_UP_REQUIRED. Configure this in your frontend payment button.
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: *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 customer_interaction_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 opens 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 customer_interaction_config object when calling the Payment Authorize API.
When does this matter? The initiationMode parameter only affects the customer experience when your backend returns STEP_UP_REQUIRED. If your backend returns APPROVED, the customer proceeds directly to the confirmation page without launching the Klarna Purchase Journey.
The Klarna Purchase Journey allows the customer to authenticate with Klarna (via login, one-time passwords, etc.), choose a payment method, and accept the payment.
Klarna redirects the customer to the return_url in customer_interaction_config, except when a pop-up experience is used and the customer stops the flow.
On completion, Klarna issues a klarna_network_session_token to the Acquiring Partner to finalize the payment.
Acquiring Partners can register event handlers on the KlarnaPayment SDK interface to track Klarna Purchase Journey stages:
Event handler
Purpose
on("complete", callback)
Triggered when the customer accepts the purchase. During a redirect flow, the handler fires once the success page loads. Pending updates are triggered even if the handler is registered after the page loads, removing the need for polling.
on("abort", callback)
Triggered when the customer stops the Klarna Purchase Journey.
on("error", callback)
Triggered when an error occurs during the Payment Request lifecycle. When defined, all errors are emitted to this handler instead of being thrown.
Event handlers provide access to the following paymentRequest properties:
Property
Definition
paymentRequestId
Unique identifier of the Payment Request.
state
Current state of the Payment Request.
previousState
Previous state of the Payment Request.
stateReason
The reason the Payment Request is in its current state.
stateContext
State-specific context. The klarna_network_session_token is stored here when the Payment Request reaches the COMPLETED state.
JAVASCRIPT
1
2
3
4
5
6
7
klarna.Payment.on("complete", (paymentRequest) => {
console.log("Payment request completed");
// By default, Klarna will redirect to the submitted return_url upon completion.// Return false if you want to prevent the redirection to the success page.returntrue
});
Use Web SDK events to enhance the customer experience — for example, displaying clear error messages when a purchase is stopped, or disabling page interactions while payment authorization is in progress.
Never use SDK events to trigger Payment Authorization. Always rely on Klarna webhooks to receive the klarna_network_session_token and finalize the payment after the customer approves the purchase.
When the authorizePayment API returns STEP_UP_REQUIRED, the customer needs to complete the Klarna Purchase Journey before you can finalize the authorization. Your backend monitors for step-up completion by the customer to know when to proceed.
Once the customer completes the step-up, Klarna issues a new klarna_network_session_token that you'll need for the finalization call in Step 7.
The klarna_network_session_token is valid for only 1 hour, so be sure to use it promptly.
Subscribe to the payment.request.state-change.completed webhook event using the guidelines provided here. Klarna sends this event when the Payment Request reaches the COMPLETED state.
This event indicates that the customer has finished the step-up interaction and that the Acquiring Partner can proceed with finalizing the authorization.
After receiving the klarna_network_session_token from webhook or polling, finalize the authorization by calling the Payment Authorize API again with the new token.
If the klarna_network_session_token has expired (1-hour validity) or the payment context doesn't match the initial authorization, the finalization call returns DECLINED.
Map the Klarna authorization result to the Partner-facing API response:
klarna_network_response_data
Requirements
Treat this value as an opaque string; do not validate or infer its structure.
Use exact parameter name klarna_network_response_data in the Partner-facing API to ensure Partners can easily identify and use the parameter
All returned data MUST be forwarded without modification.
Below is an example of how Acquiring Partners can return the Klarna Network Response Data parameter in their Partner-facing APIs.