Klarna Docs - Migration to the new Klarna WebSDK

Migration to the new Klarna WebSDK

Klarna is introducing a new WebSDK that aims to streamline the integration process and offer a more robust, fast and safe solution for partners. Although designed to be backward compatible, some changes might be necessary depending on your setup. Below are the steps to ensure a smooth transition.

Step 1: Update the Script Tag

Replace your existing <script> tag as follows:

Old Implementation

HTML

<script async="" src="https://osm.klarnaservices.com/lib.js" data-client-id="<client_id>"></script>

Please do not use lib.js for new integrations.

New Implementation

HTML

<script
    async
    data-environment="playground | production"
    src="https://js.klarna.com/web-sdk/v1/klarna.js"
    data-client-id="your_klarna_live_client_">
</script>

The value of data-client-id would be different and would look like klarna_{env}_client_{longString} which you can copy from Merchant Portal

Step 2: Modify Styling if Using ::parts API

If you're using the ::parts API for styling, update the selectors.
Old:

HTML

#placementID *::part(osm-container) {
  /* Your CSS rules here */
}

New:

HTML

#placementID::part(osm-container) {
  /* Your CSS rules here */
}

Step 3: Register your origin domain

Step 4: Modify CSP rules if you have set CSP

If you're using CSP (Content Security Policy), you will need to whitelist js.klarna.com.

For for more details and examples please follow the steps from Integrate using Klarna Web SDK