No momento, esta página não está disponível em português
Payment-method icon

Klarna Component

Add Klarna to an existing Components integration.

On this page, you can find additional configuration for adding Klarna to your Components integration.

With our Web Component integration, you can accept Klarna payments using either:

  • The Klarna widget: The shopper completes the payment in your checkout.
    For more information about the Klarna widget, see the Klarna documentation.
  • Redirect to Klarna: The shopper is redirected to Klarna to complete the payment.

Before you begin

This page assumes you have already:

API reference

Select which endpoint you're integrating:

This is the default with Components v5.0.0 or later.

Parameter name Required Description
lineItems -white_check_mark- Price and product information about the purchased items.
Klarna only approves the payment if the total amount specified in lineItems matches the amount.value, and each line item contains a description.
You can optionally specify productUrl and imageUrl to include a link to and a picture of the purchased items in the invoice.  
shopperEmail -white_check_mark-
See note 1
The shopper's email address. This is where Klarna will send the payment instructions.
For requirements on this field, see Klarna's documentation.
shopperReference -white_check_mark- A unique reference to identify the shopper (minimum length three characters).
shopperName The shopper's full name.
Recommended to increase conversion rates. If you don't include it, Klarna will ask the shopper to provide this in the checkout page.
For requirements on this field, see Klarna's documentation.
billingAddress The postal address of the shopper.
Recommended to increase conversion rates. If you don't include it, Klarna will ask the shopper to provide this in the checkout page.
For requirements on this field, see Klarna's documentation.
deliveryAddress The postal address where the purchased goods should be delivered. If not provided, this is the same as the billing address.
For requirements on this field, see Klarna's documentation.

If the recipient name is different from the shopper making the payment, specify deliveryAddress.firstName and deliveryAddress.lastName to share the recipient name with Klarna.
shopperLocale A combination of language code and country code to define the language of the Klarna checkout page. By default, the checkout page is rendered is English.

This has to match the countryCode and currency used in the request. For more information, see Klarna's documentation.
countryCode -white_check_mark- The shopper's country.

This has to match the country of the billingAddress.
telephoneNumber The shopper's telephone number, if provided.
For requirements on this field, see Klarna's documentation.
For some products or business models, Klarna may require additional information. If you need to send in this information, specify here the Base64 encoded JSON of the attachment.body value described in Klarna's documentation.

1You need to include shopperEmail to defend against potential disputes from shoppers.

See examples of other Klarna-specific payment scenarios at Invoice lines and discounts.

Component configuration

When creating an instance of the Klarna Component, specify which Klarna payment method type you want to use. To see in which countries/regions the different payment method types are available, refer to Supported countries/regions.

  • klarna_paynow for Klarna Pay Now.
  • klarna for Klarna buy now pay later.
  • klarna_account for Klarna Pay Over Time.

Optional configuration

When creating an instance of Drop-in, you can optionally mount the Klarna widget in your checkout.

The Klarna Widget

To add optional configuration, include it in a configuration object. The following example shows how to enable the Klarna widget flow for the Component:

const klarnaConfiguration = {
  useKlarnaWidget: true // When set to true, the Klarna widget is displayed. Set to false or leave the configuration object out to initiate a redirect flow.

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="klarna_paynow-container"></div>

Step 2: Create an instance of the Component

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const klarnaPayNowComponent = checkout.create('klarna_paynow').mount('#klarna_paynow-container');

If you created a configuration object for optional configuration, include it when creating an instance of the Component:

const klarnaPayNowComponent = checkout.create('klarna_paynow', klarnaConfiguration).mount('#klarna_paynow-container');

Capture the payment

If the capture delay is set to immediate and you comply with Klarna's Scheme Rules of shipping within 24 hours, then you can configure automatic capture when adding Klarna in your live Customer Area. Otherwise, you must manually capture Klarna payments within 90 days after authorization, even if you enable automatic capture on your merchant account. If the manual capture is not performed within 90 days, the authorization will expire.

Capture manually

To manually capture a Klarna payment, make a POST request to the /payments/{paymentPspReference}/captures endpoint.

  1. When you are ready to capture the payment, make a POST /payments/{paymentPspReference}/captures request, where {paymentPspReference} is the PSP reference from the original payment (pre-authorization) response. Specify:

    Parameter Required Description
    merchantAccount -white_check_mark- The name of your merchant account that is used to process the payment.
    amount.currency -white_check_mark- The three-character ISO currency code.
    amount.value -white_check_mark- The amount of the transaction, in minor units.

    This is the sum of the original, pre-authorized amount and all later adjustments.
    lineItems -white_check_mark- Price and product information about the purchased items, to be included on the invoice sent to the shopper.
    For an authorization adjustment, always specify every line item, including all captured or refunded items. See examples of Klarna-specific payment scenarios at Invoice lines and discounts.
    reference A reference that you specify for this payment modification, for use in your reconciliation process.
    The pspReference you received in the initial authorization response remains the primary merchant reference, and this reference does not overwrite it.
  2. When you receive the /payments/{paymentPspReference}/captures response, note the following:

    • pspReference: The PSP reference associated with this /captures request. This is different from the PSP reference associated with the original payment (pre-authorization) request.
    • status: received
    • reference: Your reference to this payment modification, for use in your reconciliation process.
  3. Wait for the webhook event. This informs you whether the final amount has been captured.
    If the capture is successful, this event contains:

    If the capture fails, this event contains success: false. Review the reason you received in the webhook event, fix the issue, and submit the capture request again.

See examples of other Klarna-specific payment scenarios at Invoice lines and discounts.

Shipping and tracking information (optional)

You can optionally use additionalData.openinvoicedata to include shipping and tracking information. This adds information about how the products are shipped to the deliveryAddress that you specified in the /payments request. The shipping and tracking information maps to Klarna's shipping info object.

If you have the shipping and tracking information at the time of the capture, we recommend that you send it to improve the overall shopper experience. Klarna includes this information in their app, where the info is updated based on the tracking details.

  • If all items are shipped with the same provider, specify the shipping and tracking information once, as shown in the capture example below.
  • If one or more items in the order are shipped with different a different provider or tracking details, specify the shipping and tracking information as an array.
  • You cannot specify different delivery addresses for a single order with multiple items.
openinvoicedata Corresponds with Klarna's shipping_info object Description
shippingCompany shipping_company The name of the shipping company, as specific as possible. Maximum 100 characters. If there are multiple shipping companies, specify an array. For example: DHL SE or [DHL SE, PostNord]
shippingMethod shipping_method Shipping method. Possible values:
  • PickUpStore
  • Home
  • BoxReg
  • BoxUnreg
  • PickUpPoint
  • Own
  • Postal
  • DHLPackstation
  • Digital
  • Undefined
trackingNumber tracking_number Tracking number for the shipment. Maximum 100 characters. If there are multiple tracking numbers, specify an array. For example: 050823 or [050823, 050824]
trackingUri tracking_uri URI where the customer can track their shipment. Maximum 1024 characters.
returnShippingCompany return_shipping_company The name of the shipping company for the return shipment, as specific as possible. Maximum 100 characters. For example: DHL SE
returnTrackingNumber return_tracking_number Tracking number for the return shipment. Maximum 100 characters.
returnTrackingUri return_tracking_uri URI where the customer can track their return shipment. Maximum 1024 characters.

You will receive a /capture response containing a pspReference associated with this request. Once we have processed your request, you will also receive a CAPTURE webhook. For more information, refer to Capture.

Partial captures

To partially capture a Klarna payment, specify in your call to the /capture endpoint:

  • modificationAmount: The amount that the shopper should pay. This should be less than the authorised amount.
  • additionalData.openinvoicedata: Price, product and optionally shipping and tracking information for the items that the shopper should pay for, to be included on the invoice. For the partial capture to be successful, the amounts stated in openinvoicedata need to be correct. You can use the same fields as listed in the manual captures section.

For more information and an example, refer to Invoice lines.

Refused payments

When a payment is refused by Klarna, the shopper sees the following message:

Recurring payments

To make recurring Klarna payments you need to:

  1. Create a shopper token.
  2. Use the token to make future payments for the shopper.

Create a token

To create a token, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper.

When the payment has been settled, you receive a webhook containing:

  • originalReference: The pspReference of the initial payment.
  • pspReference: This is the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.

Make a payment with a token

To make a payment with the token, include in your /payments request:

  • shopperReference: The unique shopper identifier that you specified when creating the token.
  • paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT webhook.
    You can also get this value by using the /listRecurringDetails endpoint.
  • shopperInteraction: ContAuth
  • recurringProcessingModel: The type of recurring payment that you want to make.
    Possible recurringProcessingModel values:

    recurringProcessingModel Description
    CardOnFile Online purchase where shopper is actively making a purchase using their previously stored payment details.
    Subscription A series of transactions with fixed or variable amounts, following a fixed time interval. This is the default value for payment requests where shopperInteraction: ContAuth
    UnscheduledCardOnFile Contracts that occur on a non-fixed schedule using stored payment details. For example, automatic top-ups when cardholder's balance drops below certain amount.

When making a recurring payment, you also need to provide all the parameters required for a Klarna payment request.

The following is a sample request for Klarna Pay Now, when the shopper is actively making a purchase using previously stored payment details:

Test and go live

Before accepting live payments, test your integration using the test environment and sample data provided by Klarna.

You can then check the status of Klarna test payments in your Customer Area > Transactions > Payments.

Before you go live

Make sure that:

  • You have added Klarna in your live Customer Area.
  • You have considered Klarna's legal and privacy information.
  • You follow the Klarna guidelines on how to display Klarna in your checkout.
  • The invoice lines and VAT are displayed correctly on Klarna's pages.
  • If a shopper gets rejected by Klarna, you offer them another payment method.
  • You pass the shopper's name and address in your payment request. While optional, providing these parameters improves the shopper experience and increases conversion rates.

Testing in live environment

If you are going to test Klarna payments once you are in the live environment, make sure that you:

  • Provide real shopper data. For example, your real name, personal email, personal mobile, and home and billing address. Don't provide a company address as billing address.
  • Choose an item with a reasonable amount that meets Klarna's minimum requirements. For example, for Pay over time, Klarna requires a minimum amount of GBP 35. Klarna can reject a request if the product is too expensive and they do not have enough transaction history for the shopper.
  • Don't perform multiple tests in a short span of time from the same device or IP address. This will trigger velocity rule checks, which will lead to the transaction being rejected.

If the conditions above are not met, you might receive a resultCode of Refused. The shopper sees a page with an "Option Not Available" message instead of the Klarna Payments widget. Note that these checks are bypassed in test and are only applied in the live environment.

See Klarna raw acquirer responses for the most common responses for successful, refused, failed or cancelled transactions.

See also