Web integration (One web SDK)

Integrate Sign in with Klarna into your website in 4 steps.

Last updated on Nov 21, 2023

1. Add the One web SDK script to the head tag

Begin by adding the script tag to the head section of your website's HTML source code.

HTML

<script
      src="https://js.klarna.com/web-sdk/v1/klarna.js"
      data-environment="playground"
      data-client-key="klarna_test_client_UDVOT..."
      defer
    ></script>

The script tag enables the Sign in with Klarna button to be loaded on your website.

Ensure that you specify the necessary attributes within the script tag.

Attribute	Required	Description
src	Yes	The url of the library provided by Klarna.
data-client-key	Yes	The client credential you received during the Merchant Portal self-onboarding.
data-environment	Yes	The environment to which the integration is pointing.

2. Add the Sign in with Klarna button element

Place the klarna-identity-button element inside the body tag of your desired website, at the location where you want the button to be displayed.

HTML

// Your code here
<klarna-identity-button data-theme="default" data-shape="default"></klarna-identity-button>
// Your code here

Add the klarna- identity-button tag in the exact location in your website's body where you want to place the button.

You can customize the appearance of the button by specifying values of the attributes within the klarna-sign-in tag.

Attribute	Required	Description
data-theme	No	The button’s color theme. Supported values are: default , dark , light .
data-shape	No	The button's shape. Supported values are: default , rectangle , pill .
data-logo-alignment	No	Change alignment of the Klarna logo on the button.

3. Initialize the Sign in with Klarna SDK

JAVASCRIPT

window.KlarnaSDKCallback = (klarna) => {
    Klarna.Identity.init({
          locale: 'sv-SE',
          scope: 'openid profile phone email offline_access billing_address create_payment_session',
          market: 'SE',
          clientId: '504a60e2-d903-40be-a1a5-11ffb61845ab',
    });
}

Ensure that you passed the necessary data to the init function.

Attribute	Required	Description
data-locale	No	The language in which the Sign in with Klarna button is displayed to the user. If you don't specify this parameter, the language will match either the user's browser settings or the language associated with the market.
data-scope	Yes	A space-separated list of scopes you would like to request from the user. For example, you would request billing_address if you need the billing address in your account creation.The claims of the requested scopes will be returned as part of JWT token id_token .Note: openid is always requested by default even if you don't pass it.
data-market	Yes	The market or the country where this integration is available.
data-client-id (temporary)	Yes	The UUID you received after the Sign in with Klarna onboarding.

4. Add an event listener

A function passed to this event listener will be invoked with the tokens as soon as the user completes authentication and consents to the requested scopes.

JAVASCRIPT

window.KlarnaSDKCallback = (klarna) => {
        Klarna.Identity.init...

        Klarna.Identity.on('signin', (data) => {
          console.log(data)
        })
}

The event listener lets you retrieve customer tokens.

Event listener payload

The event listener will receive the tokens corresponding to the logged-in user.

JSON

{
    "access_token": "<JWT Token>",
    "id_token": "<JWT Token>",
    "refresh_token": "<Opaque Token>",
    "expires_in": "299",
    "scope": "openid offline_access profile billing_address",
    "token_type": "bearer"
}