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

​
Quick reference

OptionTypeDefaultDescription
paymentFlowstring'DEFAULT''DEFAULT' or 'PREFER_VAULT'
recurringPaymentDescriptionstring—Description shown for recurring payments
allowedPaymentCategoriesstring[]All categories'pay_now', 'pay_later', 'pay_over_time'
buttonOptions.textstring—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.
OptionTypeDefaultDescription
paymentFlowstring'DEFAULT'Payment flow type (see values below)

​
Payment flow values

ValueDescription
'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.
OptionTypeDefaultDescription
allowedPaymentCategoriesstring[]All categoriesFilter which Klarna payment options are displayed

​
Available categories

CategoryDescription
'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.
OptionTypeDefaultDescription
buttonOptions.textstring—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

RequirementWhereDetails
paymentFlow: 'PREFER_VAULT'SDK optionsEnables vaulting flow
recurringPaymentDescriptionSDK optionsDescription shown to the customer
vaultOnSuccess: trueClient session (server)Tells Primer to vault the payment method
customerIdClient 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.
ParameterRequiredDescription
currencyCodeYes3-letter ISO 4217 currency code (e.g., USD, EUR, GBP)
order.lineItemsYesDetails of the line items of the order
order.countryCodeYesCountry code of the customer
customer.emailAddressNoPre-fills the Klarna payment form
customer.mobileNumberNoPre-fills the Klarna payment form
customer.shippingAddressNoPre-fills the Klarna payment form
customer.billingAddressNoPre-fills the Klarna payment form
paymentMethod.options.KLARNA.extraMerchantDataNoExtra 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

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