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.

HTML
<script
   src="https://x.klarnacdn.net/sign-in-with-klarna/v1/lib.js"
   data-client-id="your-client-id"
   data-market="SE"
   data-scope="offline_access profile email billing_address create_payment_session"
   data-environment="production"
   data-on-sign-in="onSignIn">
</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.

AttributeRequiredDescription
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.
data-redirect-uriNoThe URL of a page where user will be redirected after a login attempt. Please note that sensitive information will be embedded into the Redirect URL as search parameters. So, please be mindful while using third-party scripts on your Redirect page.

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.

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

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

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

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

An example object sent in a callback response.

ID token

This token contains all the requested data points.

{
  "billing_address": {
    "city": "Stockholm",
    "country": "SE",
    "postal_code": "111 48",
    "region": null,
    "street_address": "Södra Blasieholmshamnen 2",
  },
  "date_of_birth": "1941-03-21",
  "email": "customer@email.se",

An example id_token decoded

4. Setting up a redirect page (Recommended)

Setting up data-redirect-uri attribute is optional however it is highly recommended for the best user experience as popups can get blocked for various reasons.

The redirect page should contain:

  1. (Required) The same Sign in with Klarna script with the same attributes as set initially.
  2. (Required) The data-on-sigin-in callback function.
  3. (Optional) The data-on-error callback function.

Whitelisting the redirect pages

If you implemented the redirect page, please contact Klarna team to whitelist your redirect urls.

HTML
<html>
  <head>
    <title>Your Callback Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script
      src="https://x.klarnacdn.net/sign-in-with-klarna/v1/lib.js"
      data-client-id="your-client-id"
      data-market="SE"
      data-scope="offline_access profile email billing_address create_payment_session"
      data-on-sign-in="onSignIn"

Redirect page setup example