Express button solution has been deprecated. If you're interested in the a Express Checkout experience for Klarna payments, you can learn about our new solution Klarna Express Checkout
Start by adding the script tag inside the head tag of your website’s HTML source code.
<script
src="https://x.klarnacdn.net/express-button/v1/lib.js"
data-id="<mid>"
data-environment="production (default) | playground"
async
></script>The script tag referring to the Express button JavaScript library.
Take a look at the attributes you have to specify inside the script tag.
| Attribute | Required | Description |
|---|---|---|
src | Yes | The URL of the Express button JavaScript library. This URL is the same for playground and production environments. |
data-id | Yes | The unique merchant identifier (MID). The MID is different in playground and production. |
data-environment | No | The environment where Express button is used. The supported values are production and playground. If not set, this attribute is set to production by default. |
Make sure to only include the script once, even when adding multiple buttons on a page. Referring to the script multiple times can cause unwanted behavior.
Add the klarna-express-button element inside the body tag of your cart page or product page, wherever you want the button to appear.
<klarna-express-button
data-locale="en-US"
data-theme="default (default) | dark | light"
/>The <klarna-express-button> renders the Express button on a page.
| Attribute | Required | Description |
|---|---|---|
data-locale | Yes | The language of the checkout page. See the list of supported locales. |
data-theme | No | The button’s color theme. Supported values are default, dark, and light. |
After the customer signs in to their Klarna account, the asynchronous callback will return their personal details. You can then use this data to prefill billing information in your checkout.
window.klarnaExpressButtonAsyncCallback = function(){
Klarna.ExpressButton.on('user-authenticated', function (callbackData) {
// ... implement pre-fill logic here
// callbackData (see schema below) can be used to map user properties
// to already existing fields/forms in your checkout flow
})
}The asynchronous callback function lets you retrieve customer details.
In response to the callback, you get the personal details of the authenticated user.
{
first_name: "John",
last_name: "Doe",
email: "example@example.com",
date_of_birth: "1990-01-01",
phone: "+18004444444",
address: {
street_address: "3100 Pear Road",
street_address2: null,
postal_code: "93309",A sample response to the asynchronous callback.