API GuideDashboard
Home
Payments
Automation
Observability
Reconciliation
Payment Methods
Fraud Providers
SDK Reference
Changelog

Before you start

This guide assumes that you know how to

Accept payments with Klarna

Prepare the client session

Klarna requires the following data to process a payment successfully. Pass the following data in the client session, or in the payment request (for manual payment creation).

Parameter NameRequiredDescription
  1. currencyCode
3-letter currency code in ISO 4217 format, e.g. USD for US dollars
  1. order
  2. ↳
    lineItems
Details of the line items of the order
  1. order
  2. ↳
    countryCode

The country code of the user.

Learn more about the supported countries and currencies by visiting Klarna Documentation.

  1. customer
  2. ↳
    emailAddress

Customer's email address. Pass this value to pre-fill the Klarna payment form.

  1. customer
  2. ↳
    mobileNumber

Customer's mobile number (make sure it is the correct format for the country code). Pass this value to pre-fill the Klarna payment form.

  1. customer
  2. ↳
    shippingAddress

Customer's shipping address. Pass this value to pre-fill the Klarna payment form.

  1. customer
  2. ↳
    billingAddress

Customer's billing address. Pass this value to pre-fill the Klarna payment form.

When passing customer.billingAddress in the client session, 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 in the checkout.

  1. paymentMethod
  2. ↳ options
  3. ↳ KLARNA
  4. ↳
    extraMerchantData

Extra Merchant Data (EMD) package supported by Klarna can be passed via the client session. Any JSON object that will be accepted by Klarna can be sent. Available schemas are documented here

Prepare the SDK for payments

WebiOSAndroidReact Native

Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.showUniversalCheckout.

1234567891011
try {  await Primer.showUniversalCheckout(clientToken, {    container: '#checkout-container',    options,    onCheckoutComplete({ payment }) {      console.log('Checkout complete.', payment)    },  })} catch (e) {  // handle error}
typescript
copy

Customization

Check the customization guide to learn how to customize payment method buttons.

123456789101112131415
const options = {  /* Other options ... */  style: {    paymentMethodButton: {      background: string,      borderRadius: number | string,      boxShadow: string,      borderColor: string,      height: number,      primaryText: TextStyle,      logoColor: logoColor,      marginTop: string,    },  },}
typescript
copy

Troubleshooting

In order to be passed to Klarna, the shipping address and billing address must contain the following info:

  • firstName
  • lastName
  • addressLine1
  • city
  • postalCode
  • countryCode

If any data is missing, the address is not passed to Klarna. The customer will be prompted to enter their personal information within Klarna form.

Test

Visit Klarna Sample Data Page for testing the integration against the Klarna Playground environment.

Go live

You don’t need to do anything particular to go live — just make sure to use production credentials.