Klarna Docs - Steps to integrate

Steps to integrate

Integrate the Express button on your website in just three easy steps.

Step 1: Include the Klarna Express script in the head tag.

MARKUP
<script 
   src="https://x.klarnacdn.net/express-button/v1/lib.js"
   data-id="<mid>"
   data-environment="production (default) | playground"
   async
></script>

ParameterDescription
srcThe URL of the Klarna Express button library is https://x.klarnacdn.net/express-button/v1/lib.js for all environments.
data-idThe environment specific merchant identifier (MID).
data-environment (optional)The environment where the Express button is used, supported values: ['Production', 'Playground']. If the parameter is not set, data-environment is set to Production by default.

Step 2: Add the Express button element(s).

This will render the Express button wherever the <klarna-express-button> element has been placed.

MARKUP
<klarna-express-button
    data-locale="en-US"
    data-theme="default (default) | dark | light"
/>
ParameterDescription
data-localeLocalization, supported values: ['en-US','en-CA','fr-CA','en-GB']
data-theme (optional)Theme used for the button, supported values: ['default','dark','light']. If parameter is not set, theme will be set to default.

Step 3: Implement Klarna async callback to receive user details.

Upon completion of the Express Button flow, this callback method will be hit with the customer data. This data can then be used to pre-fill billing and shipping information on your checkout page.

JAVASCRIPT
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
 })
}

Example of data returned in the callback:

JSON
{
  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",