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

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 below)

Payment flow values

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

When using 'PREFER_VAULT', you must also provide recurringPaymentDescription.

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

// Only show Pay Later
klarna: {
  allowedPaymentCategories: ['pay_later'],
}

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

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.

klarna: {
  buttonOptions: {
    text: 'Pay with Klarna',
  },
}

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

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

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.

Learn more about supported countries and currencies in the Klarna documentation.

---

Testing

Sandbox testing

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

Visit the Klarna Sample Data Page for test credentials and sample customer data.

Production

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

---

Troubleshooting

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

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
3. Verify order amount meets Klarna’s minimum requirements

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

<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

SDK options reference

All configuration options

Klarna integration guide

Setup and integration guide

Klarna documentation

Official Klarna documentation