Klarna Docs - Web integration

Web integration

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

1. Add the Express button script to the head tag

Start by adding the script tag inside the head tag of your website’s HTML source code.

   data-environment="production (default) | playground"

The script tag referring to the Express button JavaScript library.

Take a look at the attributes you have to specify inside the script tag.

srcYesThe URL of the Express button JavaScript library. This URL is the same for playground and production environments.
data-idYesThe unique merchant identifier (MID). The MID is different in playground and production.
data-environmentNoThe 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.

2. Add the Express button element

Add the klarna-express-button element inside the body tag of your cart page or product page, wherever you want the button to appear.

    data-theme="default (default) | dark | light"

The <klarna-express-button> renders the Express button on a page.

data-localeYesThe language of the checkout page. See the list of supported locales.
data-themeNoThe button’s color theme. Supported values are default, dark, and light.

3. Add the asynchronous callback function to get user details

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.

Callback response

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.