Interface KlarnaIdentity

Main interface to the Identity API

SDK Initialization

const klarna = await window.Klarna.init({
   clientId: "klarna_live_client_elZGI1B5dHBIRWcjZrNldnbEVj...",
   locale: 'sv-SE'
});
Copy

Example 1: Generate button with SDK

This is the recommended and preferred method of integration

1.1. Render the Identity Button

const siwkButton = klarna.Identity.button({
   scope: "openid offline_access profile:name",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton.mount('#container');
Copy

1.2. Capture events

siwkButton.on("ready", async () => {
   // implement logic
});

siwkButton.on("click", async () => {
   // implement logic
});

klarna.Identity.on("signin", async (signinResponse) => {
   // implement logic
});

klarna.Identity.on("error", async (error) => {
   // implement error handling logic
});
Copy

1.3. Cleanup

siwkButton.unmount():
Copy

Example 2: Attach Identity Button behavior to a custom button

2.1 Add the custom button to the document

<button id="merchants-custom-button">I am a custom button</button>
Copy

2.2 Attach Identity Button behavior

const siwkButton = klarna.Identity.button({
   scope: "openid offline_access profile:name",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton.attach('#merchants-custom-button');
Copy

2.3. Capture events

siwkButton.on("ready", async () => {
   // implement logic
});

siwkButton.on("click", async () => {
   // implement logic
});

klarna.Identity.on("signin", async (signinResponse) => {
   // implement logic
});

klarna.Identity.on("error", async (error) => {
   // implement error handling logic
});
Copy

2.4. Cleanup

siwkButton.detach():
Copy

Example 3: Add multiple Identity Buttons

If needed you can create multiple Identity Buttons

const siwkButton = klarna.Identity.button({
   scope: "openid offline_access profile:name",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton.mount("#container-1")

// SECOND BUTTON RENDERED IN THE SAME PAGE
const siwkButton2 = klarna.Identity.button({
   // Notice, for multiple buttons we need to provide an ID
   id: 'secondIdentityButton',

   scope: "openid offline_access profile:name",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton2.mount("#container-2")


// Cleanup
siwkButton.unmount()
siwkButton2.unmount()
Copy