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.

Klarna provides a set of logo variations that can be used to display Klarna within your payment form. These logos are dynamically retrieved through Klarna Presentation when mounting the checkout, ensuring that the branding remains up to date and compliant with Klarna’s visual guidelines.

To retrieve the badge, set the shape attribute of the icon component to badge.

try {
    const response = await Klarna.Payment.presentation({
        amount: 10000,
        currency: 'USD',
    });
    response.icon.component({
        shape: 'badge',
    }).mount('#icon-container');
} catch (e) {
    // Handle error e

To retrieve the rectangle icon, set the shape attribute of the icon component to rectangle.

try {
    const response = await Klarna.Payment.presentation({
        amount: 10000,
        currency: 'USD',
    });
    response.icon.component({
        shape: 'rectangle',
    }).mount('#icon-container');
} catch (e) {
    // Handle error e

To retrieve the square icon, set the shape attribute of the icon component to square.

try {
    const response = await Klarna.Payment.presentation({
        amount: 10000,
        currency: 'USD',
    });
    response.icon.component({
        shape: 'square',
    }).mount('#icon-container');
} catch (e) {
    // Handle error e

As outlined in the Checkout Presentation, Klarna provides Acquiring Partners with a set of headers and customer-facing messages via the Payment Presentation. These messages are designed to be transparent, concise, and dynamically tailored to the specific customer and purchase context.

try {
    const response = await Klarna.Payment.presentation({
        amount: 10000,
        currency: 'USD',
    });
    response.header.component().mount('#header-container');
    response.subheader.component().mount('#subheader-container');
    response.message.component().mount('#message-container');
} catch (e) {
    // Handle error e

The components returned do not include predefined styles. To apply custom styling, Acquiring Partners can target individual elements using the selectors available in the rendered output. This allows for full flexibility in adapting the presentation to match the visual design of your checkout while maintaining the integrity of Klarna’s messaging.

[klarna-payment-header] {
    font-size: 16px;
}
[klarna-payment-subheader] {
    font-size: 16px;
}
[klarna-payment-message] {
    font-size: 16px;
}

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 is found in the payment form once Klarna is selected.

The theme defines the button’s color. You can change the theme by setting the value of the theme attribute.

Apart from the default dark theme, you can apply the light theme to have the button displayed in white, or the outlined theme to render the white button with an outline.

Default theme (dark)

The button’s default theme color is dark. As the theme attribute is optional, the default theme is applied both when you set the attribute to default or if you omit it from the source code altogether. Don’t use default theme on black or dark backgrounds. The button must be used on backgrounds that provide sufficient contrast.

We recommend using the default theme as it’s widely recognized by Klarna customers and looks good on light backgrounds.

Klarna.Payment.button({
    theme: "default", // Used to set the theme of the button
    ...
}).mount('#container')

Sample code to render the default Express checkout button.

Light theme

Use the light theme to make the button visible on dark backgrounds. To apply the light theme, set the theme attribute to light. Don’t use light theme on white or light backgrounds. The button must be used on backgrounds that provide sufficient contrast.

Klarna.Payment.button({
    theme: "light", // Used to set the theme of the button to light
    ...
}).mount('#container')

Sample code to render a white Express Checkout button.

Outlined theme

Use the outlined theme to make the button visible on all backgrounds. To apply the this theme, set the theme attribute to outlined. Don’t place on dark or saturated backgrounds. The button must be used on backgrounds that provide sufficient contrast.

Klarna.Payment.button({
    theme: "outlined", // Used to set the theme of the button
    ...
}).mount('#container')

Sample code to render a white, outlined Express checkout button.

Customizing the shape of the button to match your site's look and feel is a key step in creating a visually cohesive and engaging user experience. To control the button's shape, change the value of the shape attribute.

There are three shapes available with the Express checkout button: default, rectangular, and pill.

Rounded corners (default)

The default button shape is a rectangle with rounded corners. To apply the default shape, set the shape attribute of the element to default.

Klarna.Payment.button({
    shape: "default", // Used to define the shape of the button
    ...
}).mount('#container')

Sample code to render the Express checkout button in the default shape.

Minimum corner radius

To apply the rectangular shape with square corners, set the shape attribute of the element to rect.

Klarna.Payment.button({
    shape: "rect", // Used to style the button with a rectangular shape with square corners
    ...
}).mount('#container')

Sample code to render the Express checkout button in the rectangle shape with square corners.

Maximum corner radius

To apply the pill shape, set the shape attribute of the element to pill.

Klarna.Payment.button({
    shape: "pill", // Used to style the button in a pill shape
    ...
}).mount('#container')

Sample code to render the Express checkout button in the pill shape.

Width

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

​When width of button is blow 160px or the copy does not fit in the button, the text is removed and only the Klarna wordmarkis shown.

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