Klarna Docs - Web integration (One web SDK)

Web integration (One web SDK)

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

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.


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.

srcYesThe url of the library provided by Klarna.
data-client-key YesThe client credential you received during the Merchant Portal self-onboarding.
data-environment YesThe 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.

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

data-theme NoThe button’s color theme. Supported values are: default , dark , light .
data-shape NoThe button's shape. Supported values are: default , rectangle , pill .
data-logo-alignment NoChange alignment of the Klarna logo on the button.

3. Initialize the Sign in with Klarna SDK

window.KlarnaSDKCallback = (klarna) => {
          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.

data-locale NoThe 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-scopeYesA 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-marketYesThe market or the country where this integration is available.
data-client-id (temporary)YesThe 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.

window.KlarnaSDKCallback = (klarna) => {

        Klarna.Identity.on('signin', (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.

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