Klarna Web SDK v1
    Preparing search index...

    Interface KlarnaIdentity

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

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

    "Initialize the Klarna SDK with clientId and locale."

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

    identity-js mode=tabs label="JavaScript"

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

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

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

    "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: "openid offline_access profile:name",
       redirectUri: "http://localhost:3000/callback",
    })

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

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

    "2.4 Cleanup"

    siwkButton.detach();

    "3. 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()
    interface KlarnaIdentity {
        button(id?: string): KlarnaIdentityButton;
        button(
            configuration: KlarnaIdentityButtonConfiguration,
        ): 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

    Methods