If Acquiring Partners cannot use the Klarna SDK to retrieve the presentation instruction due to infrastructure constraints on their end, they must utilize Klarna Payment Presentation API to retrieve the assets and instructions necessary to build the payment selector.

The Klarna Payment Presentation APIAPI enables Acquiring Partners to retrieve Klarna-branded presentation assets (e.g. button text, icons, descriptors) tailored to a specific payment context. These assets help Partners render Klarna in compliance with Klarna’s brand and UX guidelines.

Before calling Klarna’s Payment Presentation API, ensure your backend accepts and forwards the Klarna specific parameters. These include the interoperability token which preserve session context as well as basic transaction parameters (amount, currency, locale) which will allow Klarna to deliver tailored assets to build the payment form.

Klarna Presentation API's require an interoperability token in order to provide personalized features when displaying Klarna in the payment form.

If an interoperability token was provided by the Partner requesting a checkout form, it must be forwarded to Klarna in headers.

In the request to the Payment Presentation APIAPI, the Acquiring Partner will specify the following parameters:

Path

Header

Body

Sample request body

curl https://api-global.test.klarna.com/v2/accounts/{partner_account_id}/payment/presentation \
  -H 'Authorization: Basic <API key>' \
  -H 'Content-Type: application/json' \
  -H 'Klarna-Interoperability-Token: eyJhbGciOiJIU...' \
  -d '{
        "locale": "en-US",
        "amount": 11836,
        "currency": "USD",
        "intents": ["PAY"]
      }'

The response from Klarna will contain the following parameters:

Sample response

{
  "instruction": "SHOW_KLARNA",
  "payment_status": "REQUIRES_CUSTOMER_ACTION",
  "payment_button": {
    "text": "Pay with Klarna"
  },
  "descriptor": {
    "header": {
      "text": "Pay with Klarna"
    },

The Acquiring Partner must used the assets returned by the presentation API (text, link, instruction) to display Klarna when loading the checkout form. In this step it is needed to present to the customer Klarna as an available payment method and initially only 3 elements should be presented to the customer:

1. Icon
2. Header
3. Subheader

The Acquiring Partner must use the instruction attribute returned in the response to the Payment Presentation API to dynamically build the payment selector. The instruction attribute will contain one of the following values:

The presentation instructions indicate Acquiring Partners how Klarna should be presented in the payment selector. Acquiring Partners are required to adhere to Klarna’s payment presentation instruction to achieve the best-in-class user experience.

Show Klarna	Preselect Klarna	Show only Klarna	Hide Klarna

The presentation instructions are derived from possible customer purchase journeys described in the following article.

The links present in the api response(enriched.link.href), must be opened only a new tab or new window. Please avoid using iframes.

Once the customer has decided to proceed to the Payment using Klarna, or if Klarna was pre-selected due to the presentation instruction seen above, Acquiring Partners have to refresh the layout, build and present the Klarna Enriched Subheader as well as payment button using the assets (text, link) provided by the Payment Presentation API.

1. Icon
2. Header
3. Subheader
4. Message
5. Payment Button

To correctly render the Klarna Payment button, include Klarna’s CSS and configure the button with your preferred theme, shape, and copy.

Sample code

<link rel="stylesheet" href="https://js.klarna.com/web-sdk/buttons/payment-button.css" />
  <button
    style="width: 100%"
    class="klarna-sdk-button theme-outlined shape-rect"
    aria-label="Continue with Klarna"
  >
    <div class="klarna-sdk-button__outline" aria-hidden="true">

</div>

Payment button variants

You can adjust the button’s appearance and behavior by customizing the following:

Theme

Klarna provides multiple theme options to match your site’s design. Update the button class to switch between themes:

   class="klarna-sdk-button theme-outlined shape-rect"

theme-dark	theme-light	theme-outlined

Dark background

Don’t use dark theme on black or dark backgrounds. The button must be used on backgrounds that provide sufficient contrast.

Light background

​Don’t use light theme on white or light backgrounds. The button must be used on backgrounds that provide sufficient contrast.

Shape

The Klarna button supports multiple shapes. Update the class to choose the appropriate option:

    class="klarna-sdk-button theme-outlined shape-rect"

shape-default	shape-pill	shape-rect

Button copy

Use the payment_button.text value from the response to dynamically set the button label for each market. If this can't be retrieved from the response, Klarna provides approved translations per market that can be used as a fallback.

To update button text and accessibility labels:

• Update the aria-label for accessibility.
• Update the klarna-sdk-button-copy text for the visible button label.

<button aria-label="Continue with Klarna">
  <span class="klarna-sdk-button-copy">Continue with</span>
</button>

Button size

Width

Prominently display the Klarna button. Make the button the same width as other payment buttons in stacked button layouts.

Height

The default recommended height of the Klarna button is 48px and the min height allowed is 40px. Make sure the button is the same height of other payment buttons.