Interface PaymentPresentation

interface PaymentPresentation {
    header: { component: () => KlarnaUIElement };
    icon: {
        component: (
            config: { shape: "default" | "badge" | "rectangle" | "square" },
        ) => KlarnaUIElement;
    };
    instruction: | "SHOW_KLARNA"
    | "PRESELECT_KLARNA"
    | "SHOW_ONLY_KLARNA"
    | "HIDE_KLARNA";
    message?: { component: () => KlarnaUIElement };
    paymentButton: {
        component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
    };
    paymentStatus: "PENDING_PARTNER_AUTHORIZATION"
    | "REQUIRES_CUSTOMER_ACTION";
    subheader: { component: () => KlarnaUIElement };
}

Properties

header icon instruction message? paymentButton paymentStatus subheader

Properties

header

header: { component: () => KlarnaUIElement }

Presentation header.

Param: component

A UI component that renders the header.

icon

icon: {
    component: (
        config: { shape: "default" | "badge" | "rectangle" | "square" },
    ) => KlarnaUIElement;
}

Presentation icon.

Param: component

A UI component that renders the icon.

instruction

instruction:
    | "SHOW_KLARNA"
    | "PRESELECT_KLARNA"
    | "SHOW_ONLY_KLARNA"
    | "HIDE_KLARNA"

Instruction on how Klarna should be presented in the payment selector:

  • SHOW_ONLY_KLARNA: The payment selector must show only Klarna and collapse all other options with a UX pattern implying that no choice needs to be made as it was done previously. This is returned when the customer has already approved the purchase or shown clear intent for paying with Klarna.
  • PRESELECT_KLARNA: The payment selector must pre-select Klarna and put it first as conversion will be increased. Klarna suggests collapsing all other payment methods. This is returned when the customer is recognized as a Klarna user and likely to pay with Klarna.
  • SHOW_KLARNA (default): Klarna should be available in the payment selector, respecting the ordering of the merchant and the Klarna guidelines.
  • HIDE_KLARNA: Don't show a Klarna button or offer Klarna.

Optionalmessage

message?: { component: () => KlarnaUIElement }

Message configuration.

Param: component

A UI component that renders the message.

paymentButton

paymentButton: {
    component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
}

Payment button configuration.

Param: text

The payment button text.

Param: component

A UI component that renders the payment button.

paymentStatus

paymentStatus: "PENDING_PARTNER_AUTHORIZATION" | "REQUIRES_CUSTOMER_ACTION"

The payment status of the payment.

  • PENDING_PARTNER_AUTHORIZATION: The payment is pending partner authorization.
  • REQUIRES_CUSTOMER_ACTION: The payment requires customer action.

subheader

subheader: { component: () => KlarnaUIElement }

Presentation subheader.

Param: component

A UI component that renders the subheader.

Settings

Member Visibility

On This Page

Properties