docs

Klarna Integration Guide (hidden)

Introduction

This section covers the client side integration of Klarna payments using the offical Klarna SDK. The flow can be visualized as:

Select Klarna payment method

To select Klarna as the payment method after presenting the available options to the customer, you must call the Select Payment Method endpoint and provide the paymentOptionKey corresponding to Klarna.

Example Payload:

{"data":{"paymentOptionKey":"klarna_paynow"}}

Example Response:

{
  "orderState": {
    "payment": {
      "selected": [
        {
          "configuration": {
            "initializationData": {
              "clientToken": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjgyMzA1ZWJjLWI4MTEtMzYzNy1hYTRjLTY2ZWNhMTg3NGYzZCJ9.eyJzZXNzaW9uX2lkIjoiN2RiZmI0MjUtNjBlYi02ZTZhLWE4ZTAtOGM2Y2E4MWFmODk0IiwiYmFzZV91cmwiOiJodHRwczovL2pzLnBsYXlncm91bmQua2xhcm5hLmNvbS9ldS9rcCIsImRlc2lnbiI6ImtsYXJuYSIsImxhbmd1YWdlIjoiZGUiLCJwdXJjaGFzZV9jb3VudHJ5IjoiREUiLCJlbnZpcm9ubWVudCI6InBsYXlncm91bmQiLCJtZXJjaGFudF9uYW1lIjoiWW91ciBidXNpbmVzcyBuYW1lIiwic2Vzc2lvbl90eXBlIjoiUEFZTUVOVFMiLCJjbGllbnRfZXZlbnRfYmFzZV91cmwiOiJodHRwczovL2V1LnBsYXlncm91bmQua2xhcm5hZXZ0LmNvbSIsInNjaGVtZSI6dHJ1ZSwiZXhwZXJpbWVudHMiOlt7Im5hbWUiOiJrcGMtb3NtLXdpZGdldCIsInZhcmlhdGUiOiJ2MSJ9LHsibmFtZSI6ImtwYy1wc2VsLTQ0MjkiLCJ2YXJpYXRlIjoiYSJ9LHsibmFtZSI6ImtwLWNsaWVudC1vbmUtcHVyY2hhc2UtZmxvdyIsInZhcmlhdGUiOiJ2YXJpYXRlLTEifSx7Im5hbWUiOiJrcGMtMWstc2VydmljZSIsInZhcmlhdGUiOiJ2YXJpYXRlLTEifSx7Im5hbWUiOiJrcC1jbGllbnQtdXRvcGlhLXN0YXRpYy13aWRnZXQiLCJ2YXJpYXRlIjoiaW5kZXgiLCJwYXJhbWV0ZXJzIjp7ImR5bmFtaWMiOiJ0cnVlIn19LHsibmFtZSI6ImtwLWNsaWVudC11dG9waWEtZmxvdyIsInZhcmlhdGUiOiJ2YXJpYXRlLTEifSx7Im5hbWUiOiJpbi1hcHAtc2RrLW5ldy1pbnRlcm5hbC1icm93c2VyIiwicGFyYW1ldGVycyI6eyJ2YXJpYXRlX2lkIjoibmV3LWludGVybmFsLWJyb3dzZXItZW5hYmxlIn19LHsibmFtZSI6ImtwLWNsaWVudC11dG9waWEtc2RrLWZsb3ciLCJ2YXJpYXRlIjoidmFyaWF0ZS0xIn0seyJuYW1lIjoia3AtY2xpZW50LXV0b3BpYS13ZWJ2aWV3LWZsb3ciLCJ2YXJpYXRlIjoidmFyaWF0ZS0xIn0seyJuYW1lIjoiaW4tYXBwLXNkay1jYXJkLXNjYW5uaW5nIiwicGFyYW1ldGVycyI6eyJ2YXJpYXRlX2lkIjoiY2FyZC1zY2FubmluZy1lbmFibGUifX1dLCJyZWdpb24iOiJldSIsIm9yZGVyX2Ftb3VudCI6NTEwMDAsIm9mZmVyaW5nX29wdHMiOjIsIm9vIjoiNXUiLCJ2ZXJzaW9uIjoidjEuMTAuMC0xNTkwLWczZWJjMzkwNyJ9.CtrRNCCwUMVOLPtUDEwMvnEVSmL9FQfcQqCUwH1EmUYmRQRr3VP4FqRwcxcpu_2VpxcfMMtf045W-R5n3DTBANJHQ7SyAV_BBlkRcMt5XGOJmb6ws_CI8tQTavF1d808ZdUeeG7_aN4ULxyVva4uqG4yGZUliGbHKdb7ORvYg0tbB8sRqOSxzPcoP_bURyFOWQ3A0aRFidkgKYtz-SjFPphnv2a5NJNtsEiKwb5hXIxx4MlraEhYT5L81w2HoHYksDWmQUZi4tiHYimrYSiFv3a64K2avrmWzDLtmLcAcQTnRoHiVTdDCQqOPpx-bGzIuLvzPW8dPIYsKDIee8g33Q",
              "paymentCategory": "pay_now",
              "sessionId": "7dbfb425-60eb-6e6a-a8e0-8c6ca81af894"
            }
          },
          "isDisabled": false,
          "paymentOptionKey": "klarna_paynow",
          "paymentOptionProvider": "klarna"
        }
      ]
    }
  }
}

The initializationData included in the response is used to initialize and load the Klarna SDK.

Initialize Klarna SDK

window.Klarna.Payments.init({
  client_token: checkoutState.orderState.payment.selected[0].initializationData.clientToken
});

Load Klarna inline widget

window.Klarna.Payments.load({
  container: '#klarna-payment-container',
  payment_method_category: checkoutState.orderState.payment.selected[0].initializationData.paymentCategory
});

The Klarna SDK is now fully loaded and in the next step the actual payment can be triggered.

Open Klarna payment widget

This step handles the customer's purchase intent—for example, after they click the Buy button. Since SCAYLE Checkout uses Klarna’s authorization callback flow, the order confirmation must be triggered first.

In this context, the order confirmation does not finalize the order or initiate payment capture. Instead, it is used to retrieve the Klarna callback URL needed to display the Klarna payment widget.

Example request:

{
  "data": {
    "paymentOptionKey": "klarna_paynow"
  },
  "specification": {},
  "referer": "https://scayle.cloud/checkout"
}

Example response:

{
  "orderConfirmation": {
    "redirect": {
      "method": "GET",
        "url": "https://{{tenant-space}}.checkout.api.scayle.cloud/next/order/klarna/paynow/069979719324fd4c8e14d2f8f73f12f6/callback?coPaymentToken=bd5e82c5140c261b65ffb1681d23167cf10aa9f88670f0edafa50ce34af22d05"
      }
  }
}

Afterward, you will call the authorize method on the Klarna SDK. The SDK’s success callback will return an authorization token, which must be appended as a query parameter named authorizationToken to the callback URL obtained from the previous order confirmation call.

Next, you must initiate a full-page redirect to this callback URL, now including the authorizationToken. Once the customer is redirected to this URL, the payment will be captured, the order will be confirmed, and the customer will be forwarded to the order success page.

window.Klarna.Payments.authorize(
  { payment_method_category: checkoutState.orderState.payment.selected[0].initializationData.paymentCategory },
  storeKlarnaPaymentMethod ? { intent: 'buy_and_tokenize' } : {},
  async (res: { authorization_token?: string; approved: boolean; show_form: boolean; error?: any }) => {
    if (res.approved && res.authorization_token) {
      window.location = checkoutState.orderConfirmation.redirect.url + "&authorizationToken=" +  authorization_token;
    } else if (!res.show_form) {
      // Handle payment error
    } else {
      // Handle Klarna general error
    }
  }
)