This guideline outlines the available methods for styling the appearance of Klarna elements within the checkout. It details how to retrieve and apply Klarna branding assets, configure payment method descriptors, and integrate dynamic messaging using Klarna’s APIs. The goal is to ensure the payment interface remains consistent, localized, and compliant with Klarna’s design specifications.

Merchants should dynamically retrieve the Klarna badge from the response of the create_session:

"payment_method_categories": [
  {
    "asset_urls": {
      "descriptive": "https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg",
      "standard": "https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg"
    },
    ...
],

If the checkout layout requires a different format, Merchants can alternatively download the square or rectangle Klarna logos from the links below and embed them directly in the checkout experience:

https://osm.klarnaservices.com/images/badges/klarna_badge_square.svg

https://osm.klarnaservices.com/images/badges/klarna_badge_rectangle.svg

Merchants should dynamically retrieve the header from the response of the create_session. Depending on the integration setup, the response can return either one descriptor or three descriptors.

This configuration is managed by Klarna during implementation. By default, only one header is shown.

One descriptor	Three descriptors

When using the load() call, the widget will be dynamically rendered with the appropriate message.

One descriptors	Three descriptors

​​If you are unable to retrieve descriptors dynamically, please refer to Klarna’s approved descriptor guidelines and add them manually to your checkout.

You can apply your site’s font to Klarna elements to preserve brand consistency. However, for optimal legibility and alignment with Klarna’s design standards, a system font or a simple, readable typeface is recommended. If using a custom font, avoid italic styles or any formatting that may reduce readability, as clarity must take precedence over stylistic choices.

Checkout presentation's payment button is recognizable, ensuring customers understand what happens next and feel confident in proceeding with their purchase. It should be shown in the payment form once Klarna is selected.

Klarna supports several methods for implementing the Klarna Payment button on merchant sites, depending on the integration model.

[ADD CONTENT]

If the KP library is not used, the Klarna Payment button can be created with CSS.

• Button copy: All approved translations per country are availablehere.
• Badge: Use the distribution URL provided below.

https://x.klarnacdn.net/payment-method/assets/badges/generic/klarna.svg

Sample code

<link rel="stylesheet" href="https://s3.int.klarna.net/web-sdk/v2/KPC-2318/buttons/payment-button.css" />
  <button
    style="width: 100%"
    class="klarna-sdk-button theme-dark shape-pill"
    aria-label="Continue with"
  >
    <div class="klarna-sdk-button__outline" aria-hidden="true">

</div>

Theme

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.

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