​
Before you begin

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
currencyCode✓3-letter currency code in ISO 4217 format, e.g. USD for US dollars
order
↳ lineItems		✓Details of the line items of the order
order
↳ countryCode		✓The country code of the user.Learn more about the supported countries and currencies by visiting Klarna Documentation.
customer
↳ emailAddress		Customer’s email address. Pass this value to pre-fill the Klarna payment form.
customer
↳ 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.
customer
↳ shippingAddress		Customer’s shipping address. Pass this value to pre-fill the Klarna payment form.
customer
↳ 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
.
paymentMethod
↳ options
↳ KLARNA
↳ 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

​
Show Universal Checkout

Klarna is automatically presented to the customer when calling Primer.showUniversalCheckout.
Typescript
try {
  await Primer.showUniversalCheckout(clientToken, {
    container: '#checkout-container',
    options,
    onCheckoutComplete({ payment }) {
      console.log('Checkout complete.', payment)
    },
  })
} catch (e) {
  // handle error
}

​
Customization

Check the customization guide to learn how to customize payment method buttons.
TypeScript
const options = {
  /* Other options ... */
  style: {
    paymentMethodButton: {
      background: string,
      borderRadius: number | string,
      boxShadow: string,
      borderColor: string,
      height: number,
      primaryText: TextStyle,
      logoColor: logoColor,
      marginTop: string,
    },
  },
}

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