Change the button’s appearance to match your store’s look and feel.
You can change the button’s color, label, shape, and size in a way that best suits your store’s design. To modify the style of the button, edit the source code as explained in this guide.
The theme defines the button’s color. You can change the theme by setting the value of the
data-theme attribute of the
Apart from the default pink theme, you can apply the dark theme to have the button displayed in black, or the white theme to render the white button.
The button’s default color theme is pink. As the
data-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.
We recommend using the default theme as it’s widely recognized by Klarna customers.
Use the dark theme to make the button visible on light backgrounds. To apply the dark theme, set the
data-theme attribute to
Use the light theme to make the button visible on dark backgrounds. To apply the light theme, set the
data-theme attribute to
Pick a version of the text you want to display on the button in your checkout. You can control the text by changing the value of the
data-label attribute of the
When you set the data-label attribute to default , the label will contain the Klarna logo and an Express checkout indicator.
When you set the
data-label attribute to
klarna, the button will only show the Klarna brand name, without any accompanying text.
You can choose from 3 different shapes for the button: default, rectangle, or pill. To control the button's shape, change the value of the
The default Express button shape is a rectangle with rounded corners. To apply the default shape, set the
data-shape attribute of the
klarna-express-button element to
To apply the rectangular shape with square corners, set the data-shape attribute of the klarna-express-button element to rect .
To apply the pill shape, set the data-shape attribute of the klarna-express-button element to pill .
Change the size of the button by editing the CSS styles.
Express button comes in a default size that you can change as long as you keep it within supported ranges.
To give the button specific dimensions, add a class to the
klarna-express-button element in the website’s HTML and specify the class’ width and height in CSS.
Express button supports responsive web design. Like other elements on your page, you can use media queries to resize the button depending on the viewport size.
The below example shows how you can use a media query to specify a custom size for screens up to 500px wide and use a custom class to set a height and width for other viewports.
If you’re adding multiple buttons on a page and want to size them differently, create a separate class for each button in HTML, then specify the size for each class in CSS.