Klarna Banner

Availability:

• Product page
• Bundle page
• Loyalty product page
• Loyalty bundle page

---

The klarna_banner module is used to render a banner for Klarna on a product or bundle card.

Module source code

{% from "@macros/image.twig" import image %}

{% set product = ObjectApi.getProduct(product_id) %}
{% set globalPricesSettings = ObjectApi.getProductPricesSettings() %}
{% set paymentKlarnaSettings = ObjectApi.getPaymentKlarnaSettings() %}
{% set shopLanguage = ObjectApi.getShopLocale() %}

{% set shouldShowNetPrice = globalPricesSettings.showNetPrice and not globalPricesSettings.showGrossPrice %}

{% set bannerStyle = paymentKlarnaSettings.bannerStyle %}
{% set bannerLang = shopLanguage.locale == 'pl_PL' ? 'pl' : 'en' %}

{% set purchaseAmount = shouldShowNetPrice ? product.price.netValue * 100 : product.price.grossValue * 100 %}

{% if paymentKlarnaSettings.isActive %}
    <div class="klarna-banner__container">
        {% if paymentKlarnaSettings.bannerType == 'dynamic' %}
            <klarna-banner
                product-id="{{ product.id }}"
                locale="{{ klarnaLocale }}"
                banner-style="{{ bannerStyle }}"
                purchase-amount="{{ purchaseAmount }}"
                {% if shouldShowNetPrice %} is-net {% endif %}
            ></klarna-banner>

            <script
                    async
                    data-environment="{{ klarnaEnvironment }}"
                    src="https://js.klarna.com/web-sdk/v1/klarna.js"
                    data-client-id="{{ klarnaDataClientId }}"
            ></script>
        {% else %}
            {% set bannerDesktopUrl = "//dcsaascdn.net/img/baner-klarna-desktop-#{bannerStyle}-#{bannerLang}.png" %}
            {% set bannerMobileUrl = "//dcsaascdn.net/img/baner-klarna-mobile-#{bannerStyle}-#{bannerLang}.png" %}

            {% set bannerLink =
                bannerLang == 'pl' ?
                    'https://www.klarna.com/pl/czym-jest-klarna/' :
                    'https://www.klarna.com/us/what-is-klarna/'
            %}

            <a class="klarna-banner" href="{{ bannerLink }}" target="_blank" rel="noopener">
                {% set imgDesktopProperties = {
                    src: bannerDesktopUrl,
                    alt: translate('Klarna banner'),
                    decoding: 'async',
                    lazy: true,
                    class: 'klarna-banner__image_desktop'
                } %}
                {{ image({ img: imgDesktopProperties }) }}

                {% set imgMobileProperties = {
                    src: bannerMobileUrl,
                    alt: translate('Klarna banner'),
                    decoding: 'async',
                    lazy: true,
                    class: 'klarna-banner__image_mobile'
                } %}
                {{ image({ img: imgMobileProperties }) }}
            </a>        
        {% endif %}
    </div>
{% endif %}

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox-warning",
                "options": {
                    "type": "warning",
                    "message": "The banner must be displayed in every store that uses Klarna \"Pay in 30 days\" payment option."
                }
            },
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings in the admin panel%s- activating the Klarna service in [the Payment methods](%s) settings%s- changing the banner appearance in [the Payment methods](%s) (Klarna configuration for the selected domain)",
                    "placeholderValues": [
                        "\n",
                        "\/admin\/configPayments",
                        "\n",
                        "\/admin\/configPayments"
                    ]
                }
            }
        ]
    }
]

Webcomponents reference

• klarna-banner