Integrate Sign in with Klarna into your website in 4 steps.
Begin by adding the script tag to the head section of your website's HTML source code.
Ensure that you specify the necessary attributes within the script tag.
|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.|
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.
You can customize the appearance of the button by specifying values of the attributes within the klarna-sign-in tag.
|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.|
Ensure that you passed the necessary data to the init function.
|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.|
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.
The event listener will receive the tokens corresponding to the logged-in user.