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: | "HIDE_KLARNA"
    | "SHOW_KLARNA"
    | "PRESELECT_KLARNA"
    | "SHOW_ONLY_KLARNA";
    paymentButton: {
        component: (config: KlarnaPaymentButtonConfig) => KlarnaPaymentButton;
        text: string;
    };
    subheader: {
        enriched: {
            component: () => KlarnaUIElement;
            link: { href: string; linkText: string };
            text: string;
        };
        short: { component: () => KlarnaUIElement; text: string };
    };
}

Properties

header icon instruction paymentButton subheader

Properties

header

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

Header configuration. It's preferrable to use the paymentButton.component to ensure the content is always up to date. If you use the header.text property, make sure to listen to the presentationupdate event and update the text accordingly.

Param: text

The header raw text value.

Param: component

A UI component that renders the header text.

Example

let presentation = await klarna.Payment.presentation()
presentation.header.component().mount('#header-container');

The function returns an object with a mount method that can be used to attach the header to a DOM element.

icon

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

instruction

instruction:
    | "HIDE_KLARNA"
    | "SHOW_KLARNA"
    | "PRESELECT_KLARNA"
    | "SHOW_ONLY_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.

paymentButton

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

Payment button configuration.

Param: text

The payment button text.

Param: component

A UI component that renders the payment button.

subheader

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

Subheader configuration.

You can use either the subheader.enriched or subheader.short properties to set the subheader.

Type declaration

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

    Enriched subheader configuration.

    Param: text

    The enriched subheader raw text value.

    Param: link

    Contains an href and linkText for additional information.

    Param: component

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

    Example

    let presentation = await klarna.Payment.presentation()
    presentation.subheader.enriched.component().mount('#subheader-enriched-container');

    The function returns an object with a mount method that can be used to attach the enriched subheader to a DOM element.
  • short: { component: () => KlarnaUIElement; text: string }

    Short subheader configuration. It's preferrable to use the paymentButton.component to ensure the content is always up to date. If you use the header.text property, make sure to listen to the presentationupdate event and update the text accordingly.

    Param: text

    The short subheader raw text value.

    Param: component

    A UI component that renders the subheader text.

    Example

    let presentation = await klarna.Payment.presentation()
    presentation.subheader.short.component().mount('#subheader-short-container');

    The function returns an object with a mount method that can be used to attach the short 
    subheader to a DOM element.

Settings

Member Visibility

On This Page

Properties