Klarna Docs - Web integration

Web integration

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

1. Add the Sign in with Klarna script to the head tag

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

   data-scope="offline_access profile email billing_address create_payment_session"

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-idYesThe UUID you received after the Sign in with Klarna onboarding.
data-marketYesThe market or the country where this integration is available.
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-environmentYesThe environment to which the integration is pointing.
data-on-sign-inYesThe name of the callback to be invoked once the user is authenticated.
data-on-errorYesA callback function that will be triggered in case an error happens in the integration or the authorization flow.
data-localeNoThe 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-hide-overlayNoToggle overlay on Sign in with Klarna window.

2. Add the Sign in with Klarna button element

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

// Your code here
<klarna-sign-in data-theme="default" data-shape="default" data-logo-alignment="left"></klarna-sign-in>
// Your code here

Add the klarna-sign-in 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-themeNoThe button’s color theme. Supported values are: default, dark, light.
data-shapeNoThe button's shape. Supported values are: default, rectangle, pill.
data-logo-alignmentNoChange alignment of the Klarna logo on the call to action button based on the provided configuration.

3. Add a callback function

The callback function needs to be a named function, globally available at the time the DOM/html finishes loading.
This function will be invoked with the tokens as soon as the user completes authentication and consents to the requested scopes.

function onSignIn(response) {
  const { access_token, refresh_token, id_token } = response
  // add your logic here e.g. create account and store tokens in a database

The callback function lets you retrieve customer tokens.

Callback response

The callback response will provide you with 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"

An example object sent in a callback response.