Interface KlarnaIdentity

Main interface to the Identity API

SDK Initialization

<script type="module">
 const { KlarnaSDK } = await import("https://js.klarna.com/web-sdk/v2/klarna.mjs");

 const klarna = await KlarnaSDK({
   clientId: "klarna_live_client_elZGI1B5dHBIRWcjZrNldnbEVj...",
 });
</script>
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: "profile:name profile:email",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton.mount('#container');
Copy

1.2. Capture events

siwkButton.on("render", 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: "profile:name profile:email",
   redirectUri: "http://localhost:3000/callback",
})

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

2.3. Capture events

siwkButton.on("render", 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: "profile:name profile:email",
   redirectUri: "http://localhost:3000/callback",
})

siwkButton.mount("#container-1")

// SECOND BUTTON RENDERED IN THE SAME PAGE
const siwkButton2 = klarna.Identity.button({
   scope: "profile:name profile:email",
   redirectUri: "http://localhost:3000/callback",
   // Notice, for multiple buttons we need to provide an ID
   id: 'secondIdentityButton',
})

siwkButton2.mount("#container-2")


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

Example 4: Resizing the button (if needed)

The Identity Button is responsive and you can adjust its size by specifying the width and height of the klarna-identity-button-custom-size class.

.klarna-identity-button-custom-size {
  width: 335px; // min: 48px
  height: 48px; // min: 35px, max: 60 px
}
Copy

Example 5: Setup Tokenization flow

5.1. Request the payment:customer_present scope

const tokenizationButton = klarna.Identity.button({
   scope: "payment:customer_present profile:name profile:email",
   redirectUri: "http://localhost:3000/callback",
})
Copy

5.2. Set the payment context

This is required to be able to run the SIWK + Tokenization flow. We will use the information provided here to create a payment request.

klarna.Identity.setPaymentContext({
  amount: 0,
  currency: "EUR",
  supplementaryPurchaseData: {
    ondemandService: {
      averageAmount: 0,
      minimumAmount: 1000,
      maximumAmount: 100000,
      purchaseInterval: "MONTH",
      purchaseIntervalFrequency: 1,
    }
  }
})
Copy

5.3. Handle signin event

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