Step 1: Unpack the add-on

Extract the archive and place the klarnaosmaddon and klarnaosmbackoffice folders into the custom folder of the SAP Commerce Suite:

<HYBRIS_HOME>/bin/custom

Step 2: Update localextensions.xml

• Verify Add-on Support: Ensure the following extension is present:

<extension name="addonsupport" />

• Add Klarna Extensions: Add the following entries to localextensions.xml

<extension name="klarnaosmaddon" />
<extension name="klarnaosmbackoffice" />

• Check Target Storefront Extension: Confirm that the correct storefront extension is referenced.

Step 3.: Stop the SAP Commerce server

Stop the server by using one of the following methods based on your setup:

• Embedded Mode: Press Ctrl+C.
• Service Mode:
  • Windows: Run hybrisserver.bat stop.
  • Unix: Run ./hybrisserver.sh stop.

Step 4: Set up the environment

Run the environment setup script; navigate to <HYBRIS_HOME>/bin/platform and execute:

• Windows: setantenv.bat
• Unix: ./setantenv.sh

Step 5: Install the add-on

Run the installation command:

ant addoninstall -Daddonnames="klarnaosmaddon" -DaddonStorefront.yacceleratorstorefront="yacceleratorstorefront"

Step 6: Configure Klarna URLs and tags

Set up script URLs and tags. In the SAP Commerce Backoffice, configure the following for both playground and production environments:

• Script (Library) URL: URL for Klarna's JavaScript library.
• UCI (Unique Client ID): Merchant identifier provided by Klarna (data-client-id), you can find this in Merchant portal.
• Country: The target country for Klarna On-Site Messaging.
• Placement Tag IDs: Unique identifiers for each placement location (e.g., product page, cart page).

Step 7: Modify code for KOSM integration

Update the Master Tag: Modify the master tag to include:

<c:if test="${osmConfigData.active == true}">
    <script async src="${scriptUrlKOSM}" data-client-id="${uci}"></script>
</c:if>

Update the PDP Page: Modify productPricePanel.tag .

• Add the tag library.

<%@ taglib prefix="osm" tagdir="/WEB-INF/tags/addons/klarnaosmaddon/responsive/osm/" %>

• Add osmproduct tag.

<osm:osmproduct price="${product.price.value}"/>

• Make sure to include the osm tag at the end.

<osm:osm/>

Modify the cart page: For the cart page, update cartTotals.tag as follows:

• Set the final price based on the tax setting

<div class="col-xs-6 cart-totals-right text-right grand-total">
    <ycommerce:testId code="cart_totalPrice_label">
        <c:choose>
            <c:when test="${showTax}">
                <c:set var="finalPrice" value="${cartData.totalPriceWithTax}" />
                <format:price priceData="${cartData.totalPriceWithTax}" />
            </c:when>
            <c:otherwise>
                <c:set var="finalPrice" value="${cartData.totalPrice}" />
                <format:price priceData="${cartData.totalPrice}" />

• Include the cart tag:

<osm:osmcart price="${finalPrice.value}" />

Step 8: Rebuild the system

Rebuild the system by running the following command: ant clean all

Step 9: Update the system

1. Perform a full initialization (if this is the first installation): Use the Hybris Administration Console (HAC).
2. Update the system:
   1. Open a browser and go to HAC → Platform → Update.
   2. Under General Settings, select:
      1. Update running system
      2. Localize types
   3. Under Project Data Settings, check:
      1. klarnaosmaddon
      2. klarnaosmbackoffice
   4. Click Update.

Create a Klarna OSM configuration

Log in to Backoffice

1. Open a web browser and navigate to the SAP Commerce Backoffice login page.
2. Log in with your administrator account credentials.

Navigate to Klarna On-Site Messaging

In Backoffice, go to Klarna > Klarna On-Site Messaging.

Create a new configuration

Click Create to add a new Klarna On-Site Messaging configuration.

Fill in configuration details

Enter the required values for configuring On-Site Messaging.

Save the configuration

Click Done to save your configuration.

Navigate to Klarna Common Configuration

1. In Backoffice, go to Klarna > Klarna Common Configuration.
2. Double-click the Klarna Common Configuration entry to open it for editing.

Assign base store

1. Go to the General tab.
2. In the Essentials section, select the relevant base stores where the Klarna On-Site Messaging should appear.

Assign credentials

1. In the Klarna Credentials section, select the appropriate credentials to use with the Klarna On-Site Messaging configuration.
2. If needed, click + Create Klarna Activation to create new credentials.

Assign the Klarna On-Site Messaging configuration

In the Klarna On-Site Messaging Configuration section, select the newly created OSM configuration.

Save changes

Click Save to apply your changes to the Klarna Common Configuration.