Interface KlarnaIdentityButton

Interface to the Identity Button interface.

interface KlarnaIdentityButton {
    htmlElement: HTMLElement;
    id?: string;
    attach(customButtonSelector: string): this;
    attach(customButtonElement: HTMLElement): this;
    detach(): this;
    mount(containerSelector: string): this;
    mount(containerElement: HTMLElement): this;
    on(event: "render", callback: (button: this) => Promise<void>): this;
    on(event: "click", callback: (button: this) => Promise<void>): this;
    toggleState(state: "disabled" | "loading", value?: boolean): this;
    unmount(): this;
}

Hierarchy (View Summary)

Properties

htmlElement: HTMLElement
id?: string

Methods

  • Programmatically attach the Identity Button behavior to a merchant's custom button element.

    Timings

    • When using attach method the render event is triggered after the button event handlers were attached to the custom button and openid configuration was fetched.

    Parameters

    • customButtonSelector: string

    Returns this

  • Parameters

    • customButtonElement: HTMLElement

    Returns this

  • Programmatically detaches the Identity Button behavior from merchant's custom button element

    Returns this

  • Parameters

    • containerSelector: string

    Returns this

  • Parameters

    • containerElement: HTMLElement

    Returns this

  • The render event is triggered after the button is fully visible.

    Parameters

    • event: "render"

      render

    • callback: (button: this) => Promise<void>

      Render event handler callback, triggered on render.

    Returns this

  • The click event is triggered after the button is clicked.

    Parameters

    • event: "click"

      click

    • callback: (button: this) => Promise<void>

      Render event handler callback, triggered on click.

    Returns this

  • Parameters

    • state: "disabled" | "loading"

      State "disabled" disables/enables the button, e.g. makes it non-interactive/interactive State "loading" displays/hides the loading indicator in the button

    • Optionalvalue: boolean

      can be used to set the state to a specific value instead of toggling

    Returns this