> ## 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`.
</Note>

```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.
</Note>

***

## 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).
</Tip>

***

## 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.
</Warning>

<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/).
</Tip>

***

## 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 title="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>

<Accordion title="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>

<Accordion title="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
</Accordion>

***

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

<CardGroup cols={2}>
  <Card title="SDK options reference" icon="gear" href="/sdk/primer-checkout-web/sdk-options-reference">
    All configuration options
  </Card>

  <Card title="Klarna integration guide" icon="book" href="/connections/payment-methods/klarna/direct-integration">
    Setup and integration guide
  </Card>

  <Card title="Klarna documentation" icon="arrow-up-right-from-square" href="https://docs.klarna.com/klarna-payments/">
    Official Klarna documentation
  </Card>
</CardGroup>