# How to Configure the Klarna Payment Method in Adyen Salesforce Commerce Cloud

> Configure the Klarna payment method in Adyen Salesforce Commerce Cloud. Follow simple steps to enable the inline widget and ensure seamless inline checkout for your customers.

- Repository: [Adyen/adyen-salesforce-commerce-cloud](https://github.com/adyen/adyen-salesforce-commerce-cloud)
- Tags: how-to-guide
- Published: 2026-02-23

---

**Enable the Klarna Inline Widget preference in Business Manager, activate Klarna in your Adyen account, and verify that [`klarnaHelper.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/klarnaHelper.js) and [`paymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/paymentFromComponent.js) correctly detect and render the widget for seamless inline checkout.**

To configure the Klarna payment method in the Adyen Salesforce Commerce Cloud connector, you must synchronize Business Manager preferences with server-side detection logic and client-side widget initialization. This integration allows shoppers to complete Klarna payments through an inline iframe without full-page redirects. The following guide details the exact file paths, configuration steps, and code implementations required to enable Klarna in your SFCC storefront.

## Overview of Klarna Integration Architecture

The Klarna implementation consists of three distinct layers that work together to provide a seamless checkout experience:

1. **Business Manager Preference** – Controls the Klarna inline widget toggle via the `Adyen_klarnaWidget` custom preference.
2. **Server-Side Detection** – Identifies Klarna payments in the basket using `checkIsKlarnaPayment()` to drive widget rendering logic.
3. **Client-Side Configuration** – Passes the widget flag to JavaScript components that load Klarna's UI when required.

All three layers must be correctly configured for Klarna to appear as an inline payment option rather than redirecting to a hosted payment page.

## Step-by-Step Configuration Guide

### Step 1: Enable the Klarna Inline Widget Preference

Navigate to **Administration → Sites → Settings → Adyen Settings** in Business Manager. Locate the **Klarna Inline Widget** setting and set it to **Yes** to enable the inline experience (or **No** to disable it and use redirect instead).

This action writes to the custom preference `Adyen_klarnaWidget`, which is retrieved by the `getKlarnaInlineWidgetEnabled()` method in [`src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/adyenConfigs.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/adyenConfigs.js)【^54-L56†L54-L56】. The Business Manager UI for this toggle is defined in `src/cartridges/bm_adyen/cartridge/templates/default/adyenSettings/settingCards/lpmSettings.isml`【^55-L63†L55-L63】.

### Step 2: Activate Klarna in Your Adyen Account

Ensure Klarna is enabled on your Adyen account by navigating to the Adyen Dashboard → **Settings → Payment methods**. Activate Klarna if it is not already enabled. The connector automatically requests all enabled payment methods from Adyen's Checkout API, so no additional code changes are required to make Klarna available in the checkout flow.

### Step 3: Configure Server-Side Detection

When the basket contains a Klarna payment instrument, the system must identify it to drive the appropriate UI rendering. The `checkIsKlarnaPayment()` function in [`src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/klarnaHelper.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/klarnaHelper.js) handles this detection【^8-L24†L8-L24】.

This helper is utilized by [`showConfirmationPaymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/showConfirmationPaymentFromComponent.js) to determine whether to embed the Klarna confirmation block on the order confirmation page【^10-L27†L10-L27】.

### Step 4: Implement Client-Side Widget Configuration

The client-side configuration always includes the Klarna widget setup, but activation is gated by the server-side preference. The `KlarnaConfig` object in [`src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/klarna/klarnaConfig.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/klarna/klarnaConfig.js) defines the widget configuration with `useKlarnaWidget: true`【^1-L44†L1-L44】.

This configuration is merged into the overall checkout configuration, with usage demonstrated in test files such as [`checkoutConfiguration.test.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/checkoutConfiguration.test.js).

### Step 5: Expose Configuration to the Front-End

The checkout page must expose the widget preference to JavaScript through a global variable. The `adyenComponentForm.isml` template in `src/cartridges/app_adyen_SFRA/cartridge/templates/default/checkout/billing/adyenComponentForm.isml` sets the `window.klarnaWidgetEnabled` variable based on the `AdyenConfigs.getKlarnaInlineWidgetEnabled()` value【^3-L24†L3-L24】.

At runtime, [`paymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/paymentFromComponent.js) performs the final validation before rendering, checking both the payment method type and the widget preference at lines 165-167【^165-L167†L165-L167】.

## Code Implementation Examples

### Detecting Klarna Payments Server-Side

The `checkIsKlarnaPayment()` helper parses payment instrument data to identify Klarna transactions:

```javascript
// utils/klarnaHelper.js – detect Klarna in the basket
function checkIsKlarnaPayment(basket) {
  if (!basket) return false;
  const paymentInstruments = basket.getPaymentInstruments().toArray();
  if (!paymentInstruments.length) return false;

  return paymentInstruments.some(pi => {
    if (!pi.custom.adyenPaymentData) return false;
    try {
      const data = JSON.parse(pi.custom.adyenPaymentData);
      return data.paymentMethod?.type?.includes('klarna') || false;
    } catch (e) {
      AdyenLogs.error_log('Error parsing adyenPaymentData', e);
      return false;
    }
  });
}

```

### Reading the Widget Preference

Access the Business Manager setting through the configuration utility:

```javascript
// utils/adyenConfigs.js – read the widget preference
getKlarnaInlineWidgetEnabled() {
  return getCustomPreference('Adyen_klarnaWidget');
}

```

### Runtime Widget Activation

Gate the Klarna iframe initialization based on payment type and preference:

```javascript
// paymentFromComponent.js – gate widget activation
const isKlarnaPayment = reqDataObj.paymentMethod?.type.includes('klarna');
const isKlarnaWidgetEnabled = AdyenConfigs.getKlarnaInlineWidgetEnabled();
if (isKlarnaPayment && isKlarnaWidgetEnabled) {
  // Load Klarna iframe …
}

```

### Exposing Configuration to the Front-End

Set the global flag in the ISML template:

```html
<!-- adyenComponentForm.isml – expose flag to the front-end -->
<isset name="adyenKlarnaWidgetEnabled" value="${pdict.AdyenConfigs.getKlarnaInlineWidgetEnabled()}" scope="page"/>
<script>
  window.klarnaWidgetEnabled = ${adyenKlarnaWidgetEnabled};
</script>

```

## Summary

- **Enable the Klarna Inline Widget** preference in Business Manager to write the `Adyen_klarnaWidget` custom preference, accessed via `getKlarnaInlineWidgetEnabled()` in [`adyenConfigs.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/adyenConfigs.js).
- **Activate Klarna** in your Adyen account Dashboard so the Checkout API returns it as an available payment method.
- **Server-side detection** relies on `checkIsKlarnaPayment()` in [`klarnaHelper.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/klarnaHelper.js) to identify Klarna instruments in the basket for confirmation page rendering.
- **Client-side activation** requires [`klarnaConfig.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/klarnaConfig.js) and runtime checks in [`paymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/paymentFromComponent.js) that validate both the payment method type and the widget preference before loading the iframe.
- **Front-end exposure** occurs through `adyenComponentForm.isml`, which sets `window.klarnaWidgetEnabled` for JavaScript access.

## Frequently Asked Questions

### How do I disable the Klarna inline widget and use redirect instead?

Set the **Klarna Inline Widget** preference to **No** in Business Manager under **Administration → Sites → Settings → Adyen Settings**. This updates the `Adyen_klarnaWidget` custom preference to `false`, causing `getKlarnaInlineWidgetEnabled()` to return false and forcing the checkout to use the standard Hosted Payment Page redirect instead of the inline iframe.

### Where is the Klarna payment method type detected in the codebase?

The system detects Klarna payment methods in [`src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/klarnaHelper.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/int_adyen_SFRA/cartridge/adyen/utils/klarnaHelper.js) within the `checkIsKlarnaPayment()` function. This helper parses the `adyenPaymentData` custom attribute of payment instruments to check if `paymentMethod.type` includes the string "klarna". The function is called by [`showConfirmationPaymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/showConfirmationPaymentFromComponent.js) to determine whether to render Klarna-specific confirmation UI.

### What happens if Klarna is enabled in Business Manager but not activated in the Adyen Dashboard?

If the **Klarna Inline Widget** preference is enabled in Business Manager but Klarna is not activated in your Adyen account, the payment method will not appear in the checkout. The connector automatically queries Adyen's Checkout API for available payment methods, and unactivated methods are not returned in the API response. Consequently, the client-side configuration in [`klarnaConfig.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/klarnaConfig.js) will not have payment method data to render, regardless of the Business Manager preference setting.

### Which files control the client-side Klarna widget initialization?

Client-side initialization is controlled by three primary files: [`src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/klarna/klarnaConfig.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/app_adyen_SFRA/cartridge/client/default/js/adyen/checkout/paymentMethodsConfiguration/klarna/klarnaConfig.js) defines the widget configuration with `useKlarnaWidget: true`; `src/cartridges/app_adyen_SFRA/cartridge/templates/default/checkout/billing/adyenComponentForm.isml` exposes the server-side preference as `window.klarnaWidgetEnabled`; and [`src/cartridges/int_adyen_SFRA/cartridge/adyen/scripts/payments/paymentFromComponent.js`](https://github.com/adyen/adyen-salesforce-commerce-cloud/blob/main/src/cartridges/int_adyen_SFRA/cartridge/adyen/scripts/payments/paymentFromComponent.js) performs the runtime validation that gates iframe loading based on payment type and preference state.