Klarna Web SDK v2
    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

    label="JavaScript"

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

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

    siwkButton.mount('#container');

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

    siwkButton.unmount();

    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="partners-custom-button">I am a custom button</button>

    label="JavaScript"

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

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

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

    siwkButton.detach();

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

    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
    }

    gated

    interface KlarnaIdentity {
        button(id?: string): KlarnaIdentityButton | undefined;
        button(
            data: KlarnaIdentityData & ButtonConfiguration,
        ): KlarnaIdentityButton;
        clearLoginState(): Promise<void>;
        on(
            event: "signin",
            callback: (response: IdentitySignInResponse) => Promise<void>,
        ): void;
        on(event: "error", callback: (error: Error) => Promise<void>): void;
    }
    Index
    button clearLoginState on

    • Parameters

      • Optionalid: string

      Returns KlarnaIdentityButton | undefined

      "Returns an existing Identity button instance by its ID.

      If no ID is provided, returns the first button instance. If no button instance is found, returns undefined.

      Use this to retrieve a previously created button for cleanup or re-mounting."

      label="Example"

      // Retrieve the default (first) button instance
      const siwkButton = klarna.Identity.button();

      if (siwkButton) {
        siwkButton.unmount();
      }

      // Retrieve a specific button by ID
      const secondButton = klarna.Identity.button("secondIdentityButton");

      Identity

      Identity.button

      Identity

      gated

      Identity.button

      true

      true

    • Parameters

      Returns KlarnaIdentityButton

      "Creates an Identity button with the given configuration. The redirectUri must point to the page where the customer lands after authenticating with Klarna — you must also register the signin handler on that page. The scope defines which profile data you request (e.g. 'profile:name profile:email').

      The id attribute is required when creating more than one Identity button on the same page.

      After creating the button, call mount() to render it into a DOM container."

      label="Example"

      const siwkButton = klarna.Identity.button({
        scope: "profile:name profile:email",
        redirectUri: "https://example.com/callback",
      });

      siwkButton.mount("#sign-in-container");

      Identity

      Identity.button

      Identity

      gated

      Identity.button

      true

      true

    • Returns Promise<void>

      Promise that resolves when the login state is successfully cleared

      "Clears the customer's login state and removes personalized experience.

      This method should be called by partners once a customer signs out from their application. It clears the authenticated session and removes any personalized Klarna experience from the Web SDK. This ensures that no customer-specific data or session persists after sign-out."

      label="Example"

      try {
        await klarna.Identity.clearLoginState();
        console.log('Login state cleared successfully');
      } catch (error) {
        console.error('Failed to clear login state:', error);
      }

      Identity

      Identity.clearLoginState

      Identity

      gated

      Identity.clearLoginState

      true

      true

      Error if the operation fails

    • Parameters

      Returns void

      "Registers a signin event handler. This fires when the customer successfully authenticates with Klarna and the requested profile data is available.

      Important: This handler must also be registered on the redirect callback page (the redirectUri you provided when creating the button) so that the redirect response is properly handled."

      label="Example"

      klarna.Identity.on("signin", async (response) => {
        const { customerProfile } = response;

        // Use the profile data to pre-fill forms or create an account
        console.log("Signed in:", customerProfile.givenName, customerProfile.familyName);
        console.log("Email:", customerProfile.email);

        // Send the profile to your backend
        await fetch("/api/auth/klarna", {
          method: "POST",
          body: JSON.stringify(customerProfile),
        });
      });

      Identity

      Identity.onSignIn

      Identity

      gated

      Identity.onSignIn

      true

      true

    • Parameters

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

      Returns void

      "Registers an error event handler for the Identity flow. This fires when any error occurs during sign-in (e.g. network failure, user denied consent, or invalid configuration). Register this handler to provide graceful error handling instead of letting errors propagate unhandled."

      label="Example"

      klarna.Identity.on("error", async (error) => {
        console.error("Identity error:", error.message);
        // Show a user-friendly message or fall back to manual sign-in
        showSignInFallback();
      });

      Identity

      Identity.onError

      Identity

      gated

      Identity.onError

      true

      true

    Settings
    Member Visibility

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