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

    Interface KlarnaIdentity

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

    This is the recommended and preferred method of integration

    identity-js mode=tabs label="JavaScript"

    "Create the Identity button, mount it to a container, 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(). Register events and detach when done."

    <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
    }
    interface KlarnaIdentity {
        button(id?: string): KlarnaIdentityButton;
        button(
            data: KlarnaIdentityData & ButtonConfiguration,
        ): 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

      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

    Example 1: Generate button with SDKExample 2: Attach Identity Button behavior to a custom button
    Methods