Klarna Web SDK v2
    Preparing search index...

    Interface PaymentPresentation

    interface PaymentPresentation {
        header: { component: () => KlarnaUIElement; text: string };
        icon: {
            alt: string;
            badgeImageUrl: string;
            component: (
                config: { shape: "default" | "badge" | "rectangle" | "square" },
            ) => KlarnaUIElement;
            rectangleImageUrl: string;
            squareImageUrl: string;
        };
        instruction: | "SHOW_KLARNA"
        | "PRESELECT_KLARNA"
        | "SHOW_ONLY_KLARNA"
        | "HIDE_KLARNA";
        message?: { component: () => KlarnaUIElement; markdownContent: string };
        paymentButton: {
            component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
            text: string;
        };
        paymentOption?: {
            badge?: { component: () => KlarnaUIElement };
            header: { component: () => KlarnaUIElement };
            icon: {
                component: (
                    config: { shape: "default" | "badge" | "rectangle" | "square" },
                ) => KlarnaUIElement;
            };
            message?: { component: () => KlarnaUIElement };
            paymentButton: {
                component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
            };
            paymentOptionId: string;
            subheader: { component: () => KlarnaUIElement };
            terms?: { component: () => KlarnaUIElement };
        };
        paymentStatus: "PENDING_PARTNER_AUTHORIZATION"
        | "REQUIRES_CUSTOMER_ACTION";
        savedPaymentOption?: {
            badge?: { component: () => KlarnaUIElement };
            header: { component: () => KlarnaUIElement };
            icon: {
                component: (
                    config: { shape: "default" | "badge" | "rectangle" | "square" },
                ) => KlarnaUIElement;
            };
            message?: { component: () => KlarnaUIElement };
            paymentButton: {
                component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
            };
            paymentOptionId: string;
            subheader: { component: () => KlarnaUIElement };
            terms?: { component: () => KlarnaUIElement };
        };
        subheader: {
            component: () => KlarnaUIElement;
            enriched: {
                component: () => KlarnaUIElement;
                link: { href: string; linkText: string };
                text: string;
            };
            short: { component: () => KlarnaUIElement; text: string };
        };
    }
    Index
    header icon instruction message? paymentButton paymentOption? paymentStatus savedPaymentOption? subheader
    header: { component: () => KlarnaUIElement; text: string }

    Presentation header.

    Type Declaration

    • component: () => KlarnaUIElement
    • text: string

      gated

    gated

    Use paymentOption.* instead.

    A UI component that renders the header.

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

    Presentation icon.

    Type Declaration

    • alt: string

      gated

    • badgeImageUrl: string

      gated

    • component: (
          config: { shape: "default" | "badge" | "rectangle" | "square" },
      ) => KlarnaUIElement
    • rectangleImageUrl: string

      gated

    • squareImageUrl: string

      gated

    A UI component that renders the icon.

    gated

    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.
    message?: { component: () => KlarnaUIElement; markdownContent: string }

    Message configuration.

    Type Declaration

    • component: () => KlarnaUIElement
    • markdownContent: string

      gated

      The markdown content of the message.

    gated

    Use paymentOption.* instead.

    A UI component that renders the message.

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

    Payment button configuration.

    Type Declaration

    A UI component that renders the payment button.

    gated

    paymentOption?: {
        badge?: { component: () => KlarnaUIElement };
        header: { component: () => KlarnaUIElement };
        icon: {
            component: (
                config: { shape: "default" | "badge" | "rectangle" | "square" },
            ) => KlarnaUIElement;
        };
        message?: { component: () => KlarnaUIElement };
        paymentButton: {
            component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
        };
        paymentOptionId: string;
        subheader: { component: () => KlarnaUIElement };
        terms?: { component: () => KlarnaUIElement };
    }

    Payment option configuration for new payments.

    A UI component that renders the Klarna icon.

    A UI component that renders the header.

    A UI component that renders the message.

    A UI component that renders the subheader.

    A UI component that renders the button for this payment option.

    A UI component that renders the badge (optional).

    A UI component that renders the terms (optional).

    Unique identifier for the payment option.

    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.
    savedPaymentOption?: {
        badge?: { component: () => KlarnaUIElement };
        header: { component: () => KlarnaUIElement };
        icon: {
            component: (
                config: { shape: "default" | "badge" | "rectangle" | "square" },
            ) => KlarnaUIElement;
        };
        message?: { component: () => KlarnaUIElement };
        paymentButton: {
            component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
        };
        paymentOptionId: string;
        subheader: { component: () => KlarnaUIElement };
        terms?: { component: () => KlarnaUIElement };
    }

    Saved payment option configuration for tokenized customers.

    A UI component that renders the icon.

    A UI component that renders the header.

    A UI component that renders the message.

    A UI component that renders the subheader.

    A UI component that renders the button for this payment option.

    A UI component that renders the badge (optional).

    A UI component that renders the terms (optional).

    Unique identifier for the saved payment option.

    subheader: {
        component: () => KlarnaUIElement;
        enriched: {
            component: () => KlarnaUIElement;
            link: { href: string; linkText: string };
            text: string;
        };
        short: { component: () => KlarnaUIElement; text: string };
    }

    Presentation subheader.

    Type Declaration

    • component: () => KlarnaUIElement
    • enriched: {
          component: () => KlarnaUIElement;
          link: { href: string; linkText: string };
          text: string;
      }

      Enriched subheader.

      gated @deprecated: Use message.component instead. This property will be removed in a future release.

      Param: text

      The enriched subheader raw text value.

      Contains an href and linkText for additional information.

      A function that returns a mountable UI element for the enriched subheader.

    • short: { component: () => KlarnaUIElement; text: string }

      Short subheader.

      gated @deprecated: Use subheader.component instead. This property will be removed in a future release.

      Param: text

      The short subheader raw text value.

      A UI component that renders the subheader text.

    gated

    Use paymentOption.* instead.

    A UI component that renders the subheader.

    Settings
    Member Visibility

    On This Page
    Properties