Klarna Web SDK v2/r6
    Preparing search index...

    Interface KlarnaIdentity

    Main interface to the Identity API. Use button() to create the Identity button and on() to subscribe to events.

    identity-html-init mode=stack label="SDK Initialization"

    "Load the Klarna Web SDK module and initialize with clientId."

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

    identity-js mode=tabs label="JavaScript"

    "Create the Identity button, mount it, subscribe to render/click/signin/error events, and unmount on cleanup."

    "1.1 Render the Identity Button"

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

    siwkButton.mount('#container');

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

    "1.3 Cleanup"

    siwkButton.unmount();

    identity-html-2 mode=stack label="HTML (custom button)"

    "Use your own button in the DOM and attach Identity behavior with attach()."

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

    identity-js mode=tabs label="JavaScript"

    "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');

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

    "2.4 Cleanup"

    siwkButton.detach();

    "3. 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()

    identity-css mode=stack label="CSS"

    "Optional: customize button dimensions (min width 48px, height 35–60px)."

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

    identity-ts-tokenization mode=tabs label="Tokenization"

    "Request payment:customer_present scope, start payment request, and handle signin."

    "5.1 Request scope"

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

    "5.2 Start payment request"

    klarna.Identity.button({
       scope: "payment:customer_present profile:name profile:email",
       redirectUri: "http://localhost:3000/callback",
       paymentRequest: {
         amount: 1000,
         currency: "EUR",
       }
    })

    "5.3 Handle signin event"

    klarna.Identity.on("signin", async (signinResponse) => {
       // implement logic
    });
    interface KlarnaIdentity {
        button(id?: string): KlarnaIdentityButton;
        button(data: any): KlarnaIdentityButton;
        on(
            event: "signin",
            callback: (response: IdentitySignInResponse) => Promise<void>,
        ): void;
        on(event: "error", callback: (error: Error) => Promise<void>): void;
    }
    Index

    Methods

    button on

    Methods

    • Parameters

      • Optionalid: string

      Returns KlarnaIdentityButton

      Identity

      Identity.button

      general-availability

      true

      true

      acquiring_partner Returns the button with given id

      If id is not provided, returns the first button instance

      If no button instance found returns undefined

    • Parameters

      • data: any

      Returns KlarnaIdentityButton

      Identity

      Identity.button

      general-availability

      true

      true

      acquiring_partner Creates the button with given configuration

      id attribute is required for creating more than one Identity Button.

    • Parameters

      Returns void

      Identity

      Identity.onSignIn

      general-availability

      true

      true

      acquiring_partner Registers signin event handler.

      This event handler needs to be registered also on the redirect callback page to trigger handling redirect response.

    • Parameters

      • event: "error"
      • callback: (error: Error) => Promise<void>

      Returns void

      Identity

      Identity.onError

      general-availability

      true

      true

      acquiring_partner Registers error event handler.

    Settings

    Member Visibility

    On This Page

    Methods