Integrate Sign in with Klarna into your website in 3 steps.
Begin by adding the script tag to the head section of your website's HTML source code.
<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.
| Attribute | Required | Description |
|---|---|---|
src | Yes | The url of the library provided by Klarna. |
data-client-id | Yes | The UUID you received after the Sign in with Klarna onboarding. |
data-market | Yes | The market or the country where this integration is available. |
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-environment | Yes | The environment to which the integration is pointing. |
data-on-sign-in | Yes | The name of the callback to be invoked once the user is authenticated. |
data-on-error | Yes | A callback function that will be triggered in case an error happens in the integration or the authorization flow. |
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-hide-overlay | No | Toggle overlay on Sign in with Klarna window. |
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 hereAdd 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.
| 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 call to action button based on the provided configuration. |
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.
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.