Klarna Docs - Steps to integrate

Steps to integrate

Integrate the Express button on your website in just three easy steps
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.

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

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