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

    Interface ButtonConfiguration

    interface ButtonConfiguration {
        disabled?: boolean;
        hideOverlay?: boolean;
        id?: string;
        initiationMode?: "DEVICE_BEST" | "REDIRECT" | "ON_PAGE" | "POPUP";
        intents?: ("PAY" | "SUBSCRIBE" | "SIGNUP" | "SIGNIN" | "DONATE")[];
        loading?: boolean;
        locale?: string;
        shape?: "default" | "pill" | "rect";
        theme?: "default" | "light" | "dark" | "outlined";
    }

    Hierarchy (View Summary)

    Index

    Properties

    disabled?: boolean

    Sets the initial disabled state of the button.

    false
    
    hideOverlay?: boolean

    Controls if the backdrop overlay should be shown during the customer flow.

    The overlay ensures that the customer cannot interact with the background content until the Klarna window is closed. It offers a recovery mechanism for the customer to continue their flow in case the Klarna window goes out of focus or is blocked by the browser.

    Only use this if you are using a custom overlay that aligns with Klarna's best practice.

    gated

    false.

    id?: string

    Unique identifier for the button.

    initiationMode?: "DEVICE_BEST" | "REDIRECT" | "ON_PAGE" | "POPUP"

    Defines how the customer flow is launched upon clicking the button.

    It's recommended to use the DEVICE_BEST value to let Klarna decide the best way to launch the flow in different devices and environments.

    "DEVICE_BEST"
    
    intents?: ("PAY" | "SUBSCRIBE" | "SIGNUP" | "SIGNIN" | "DONATE")[]

    The intents that the button will be used for.

    Klarna will adjust the button label accordingly to optimize the conversion rate. If there are multiple intents, put the primary intent first.

    ["PAY"]
    
    loading?: boolean

    Sets the initial loading state of the button.

    false
    
    locale?: string

    Locale of the button.

    "en-US"
    
    shape?: "default" | "pill" | "rect"

    Shape of the button.

    "default"
    
    theme?: "default" | "light" | "dark" | "outlined"

    Theme of the button.

    "default"