Interface KlarnaPaymentButtonConfig

interface KlarnaPaymentButtonConfig {
    disabled?: 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)

Properties

disabled?: boolean

Sets the initial disabled state of the button.

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"