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

    Interface KlarnaPaymentButtonConfig

    interface KlarnaPaymentButtonConfig {
        disabled?: boolean;
        hideOverlay?: boolean;
        id?: string;
        initiate?:
            | (() => Promise<PaymentRequestData>)
            | (() => Promise<{ paymentRequestId: string }>)
            | (() => Promise<{ returnUrl?: 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? hideOverlay? id? initiate? initiationMode? intents? loading? locale? shape? theme?

    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.

    initiate?:
        | (() => Promise<PaymentRequestData>)
        | (() => Promise<{ paymentRequestId: string }>)
        | (() => Promise<{ returnUrl?: string }>)

    The function is triggered after the button is clicked.

    Return a promise that resolves to a PaymentRequestData object if you want to create a payment request on the client side.

    Return a promise that resolves to a PaymentRequestId object if you have created a payment request on the server side.

    Return a promise that resolves to an object with an optional returnUrl if you want to redirect the customer to a success page. This is typically used when you have custom logic on the server side which does not necessarily create a payment request. One example is when you use payment/authorize which returns an approved transaction.

    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"

    Settings

    Member Visibility

    On This Page

    Properties