Klarna Docs - Steps to integrate

Steps to integrate

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

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

The script should only be added once. This should be the case even if you want to place multiple buttons on the page. Adding more than one script can cause unwanted behaviors.

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.

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

    data-theme="default (default) | dark | light"
data-localeLocalization, list of supported locales can be found in this table.
data-theme (optional)Theme used for the button, supported values: ['default','dark','light']. If parameter is not set, theme will be set to default.

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. For optimum results don't forget to follow our best practices.

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:

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