> ## Documentation Index
> Fetch the complete documentation index at: https://primer.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Klarna options

> Configuration options for Klarna payment integration

Klarna enables customers to pay using a range of buy now, pay later options including Pay Now, Pay Later, and financing plans.

## Quick reference

| Option | Type | Default | Description |
| - | - | - | - |
| `paymentFlow` | `string` | `'DEFAULT'` | `'DEFAULT'` or `'PREFER_VAULT'` |
| `recurringPaymentDescription` | `string` | — | Description shown for recurring payments |
| `allowedPaymentCategories` | `string[]` | All categories | `'pay_now'`, `'pay_later'`, `'pay_over_time'` |
| `buttonOptions.text` | `string` | — | Custom text next to the Klarna logo |

```javascript theme={"dark"}
checkout.options = {
  klarna: {
    paymentFlow: 'DEFAULT',
    allowedPaymentCategories: ['pay_now', 'pay_later'],
    buttonOptions: {
      text: 'Pay with Klarna',
    },
  },
};
```

***

## Payment flow

Control the payment flow for Klarna.

| Option | Type | Default | Description |
| - | - | - | - |
| `paymentFlow` | `string` | `'DEFAULT'` | Payment flow type (see [values](#payment-flow-values) below) |

### Payment flow values

| Value | Description |
| - | - |
| `'DEFAULT'` | Standard one-off payment (default) |
| `'PREFER_VAULT'` | Vault the Klarna account for future payments |

> [!NOTE]
>
> When using `'PREFER_VAULT'`, you must also provide `recurringPaymentDescription`.

```javascript theme={"dark"}
// Standard one-off payment
klarna: {
  paymentFlow: 'DEFAULT',
}

// Vault for recurring payments
klarna: {
  paymentFlow: 'PREFER_VAULT',
  recurringPaymentDescription: 'Monthly subscription',
}
```

***

## Payment categories

Restrict which Klarna payment categories are available to customers.

| Option | Type | Default | Description |
| - | - | - | - |
| `allowedPaymentCategories` | `string[]` | All categories | Filter which Klarna payment options are displayed |

### Available categories

| Category | Description |
| - | - |
| `'pay_now'` | Pay immediately via direct debit or bank transfer |
| `'pay_later'` | Pay in 30 days |
| `'pay_over_time'` | Pay in 3-4 instalments or financing plans |

By default, all categories supported by the merchant's Klarna configuration are shown. Set `allowedPaymentCategories` to limit the options.

### Examples

```javascript theme={"dark"}
// Only show Pay Later
klarna: {
  allowedPaymentCategories: ['pay_later'],
}

// Pay Now and Pay Later (no financing)
klarna: {
  allowedPaymentCategories: ['pay_now', 'pay_later'],
}
```

> [!NOTE]
>
> Available categories also depend on the customer's country, the order amount, and the merchant's Klarna configuration. If a specified category is not available for the given context, it will not be displayed.

***

## Button customization

Customize the text displayed on the Klarna payment button.

| Option | Type | Default | Description |
| - | - | - | - |
| `buttonOptions.text` | `string` | — | Text displayed next to the Klarna logo. Replaces the default "Pay with" text. |

```javascript theme={"dark"}
klarna: {
  buttonOptions: {
    text: 'Pay with Klarna',
  },
}
```

> [!TIP]
>
> Use button text that reflects the Klarna payment options available in your customer's region (e.g., "Pay later with Klarna" if only offering Pay Later).

***

## Vaulting

Enable vaulting to save Klarna accounts for recurring payments.

### Requirements checklist

| Requirement | Where | Details |
| - | - | - |
| `paymentFlow: 'PREFER_VAULT'` | SDK options | Enables vaulting flow |
| `recurringPaymentDescription` | SDK options | Description shown to the customer |
| `vaultOnSuccess: true` | Client session (server) | Tells Primer to vault the payment method |
| `customerId` | Client session (server) | Identifies the customer in your system |

### SDK configuration

```javascript theme={"dark"}
checkout.options = {
  klarna: {
    paymentFlow: 'PREFER_VAULT',
    recurringPaymentDescription: 'Monthly subscription - Premium Plan',
  },
};
```

### How it works

1. Customer authenticates with Klarna
2. Klarna authorizes a recurring payment token
3. Primer stores the vaulted payment method
4. Future payments use the saved method without re-authentication

***

## Client session requirements

Klarna requires specific data in the client session to process payments. Pass these when creating the client session on your server.

| Parameter | Required | Description |
| - | - | - |
| `currencyCode` | Yes | 3-letter ISO 4217 currency code (e.g., `USD`, `EUR`, `GBP`) |
| `order.lineItems` | Yes | Details of the line items of the order |
| `order.countryCode` | Yes | Country code of the customer |
| `customer.emailAddress` | No | Pre-fills the Klarna payment form |
| `customer.mobileNumber` | No | Pre-fills the Klarna payment form |
| `customer.shippingAddress` | No | Pre-fills the Klarna payment form |
| `customer.billingAddress` | No | Pre-fills the Klarna payment form |
| `paymentMethod.options.KLARNA.extraMerchantData` | No | Extra Merchant Data (EMD) supported by Klarna |

> [!WARNING]
>
> When passing `customer.billingAddress`, ensure that Klarna has payment method categories configured for the given address. If Klarna is not supported for the given billing address, no Klarna button will be rendered.

> [!TIP]
>
> Learn more about supported countries and currencies in the [Klarna documentation](https://docs.klarna.com/klarna-payments/in-depth-knowledge/puchase-countries-currencies-locales/).

***

## Testing

### Sandbox testing

Use Primer's TEST environment to test Klarna payments without processing real transactions.

Visit the [Klarna Sample Data Page](https://docs.klarna.com/resources/test-environment/sample-customer-data/) for test credentials and sample customer data.

### Production

No special configuration is required to go live — use your production credentials.

***

## Troubleshooting

> [accordion] Klarna button not appearing
>
> **Possible causes:**
>
> * Klarna not configured in Primer Dashboard
> * Required client session data missing (`currencyCode`, `order.lineItems`, `order.countryCode`)
> * Klarna does not support the customer's billing address or country
> * `allowedPaymentCategories` set to categories not available for the given context
>
> **Debug steps:**
>
> 1. Check browser console for errors
> 2. Verify Klarna is in your `enabledPaymentMethods` (if specified)
> 3. Verify all required client session parameters are provided
> 4. Try removing `allowedPaymentCategories` to allow all categories

> [accordion] Payment categories not displaying
>
> **Possible causes:**
>
> * `allowedPaymentCategories` filters out all available categories
> * Klarna does not offer the specified categories for the customer's country or order amount
>
> **Debug steps:**
>
> 1. Remove `allowedPaymentCategories` to see all available categories
> 2. Check Klarna's [supported countries and currencies](https://docs.klarna.com/klarna-payments/in-depth-knowledge/puchase-countries-currencies-locales/)
> 3. Verify order amount meets Klarna's minimum requirements

> [accordion] Vaulting not working
>
> **Checklist:**
>
> * `paymentFlow: 'PREFER_VAULT'` in SDK options
> * `recurringPaymentDescription` provided in SDK options
> * `vaultOnSuccess: true` in client session
> * `customerId` provided in client session

***

## Complete example

```html theme={"dark"}
<primer-checkout client-token="your-client-token"></primer-checkout>

<script type="module">
  import { loadPrimer } from '@primer-io/primer-js';

  loadPrimer();

  const checkout = document.querySelector('primer-checkout');
  checkout.options = {
    klarna: {
      // Payment flow
      paymentFlow: 'DEFAULT',

      // Restrict payment categories
      allowedPaymentCategories: ['pay_now', 'pay_later', 'pay_over_time'],

      // Button customization
      buttonOptions: {
        text: 'Pay with Klarna',
      },
    },
  };
</script>
```

***

## See also

> [card] [SDK options reference](https://primer.io/docs/sdk/primer-checkout-web/sdk-options-reference.md)
>
> All configuration options

> [card] [Klarna integration guide](https://primer.io/docs/connections/payment-methods/klarna/direct-integration.md)
>
> Setup and integration guide

> [card] [Klarna documentation](https://docs.klarna.com/klarna-payments/)
>
> Official Klarna documentation


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.