Klarna Banner¶

This webcomponent is responsible for rendering a banner for Klarna.

Attributes¶

Attribute name	Type	Description
product-id (mandatory)	number	Id of the currently viewed product
is-net (mandatory)	boolean	Set to `true` if the price is a net price, otherwise set to `false`
locale (mandatory)	string	A language code currently set in the shop
banner-style (mandatory)	string	A name of the style of the banner
purchase-amount (mandatory)	number	Price of a product in minor currency units, for example cents, kopiykas, groszy

Event Bus events¶

This webcomponent listens the following events with the Event Bus:

product.stockChanged

Example¶

In this example we render a klarna banner webcomponent on a product page. We utilize some ObjectApi methods as well as global variables to properly render it.

klarnaLocale, klarnaEnvironment and klarnaDataClientId are global variables used to properly integrate the SDK within the component.

Other variables are taken from various ObjectApi methods: getProduct, getProduct, getShopLocale and getPaymentKlarnaSettings which will not be fully shared due to business reasons.

    {% 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 %}

    <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>