This step will be carried out in two different ways depending on your type of integration:

Klarna requires the payment request be initiated using the Klarna payment button wherever possible. This allows for a simple client-side integration with proactively maintained messaging.

We recommend Partners to change their payment button to Klarna’s payment button when a customer selects Klarna, using the theme most appropriate to the Partner page.

<div id="#button-container">

</div>

var klarnaPaymentButton = klarna.Payment.button({
  id: "klarna-payment-button",
  shape: "pill",
  label: "Pay",
  theme: "dark"
});

klarnaPaymentButton.mount('#button-container'); 

Configure the InteractionMode

The payment request options allows you to specify the interactionMode parameter which controls how the Klarna purchase flow is launched (redirect / modal window) on different devices (mobile/desktop/native):

Generate a Redirect URL

The redirectUrl guides the customer back to your online store after a completed or canceled payment request. By embedding placeholders in the URL, Klarna can dynamically insert pertinent transaction information, ensuring the URL is comprehensive for transaction processing.

To ensure security and integrity, the server-side confirmation payment request call is required to complete a payment. Klarna recommends all partners verify data received via redirect against that received via webhooks to prevent token misuse. Tokens passed via the redirect_url are only valid for the account that completes the payment, preventing hijacking.

For mobile integrations, ensure the redirectUrl is a deep link.

Redirect URL example

config: {
  redirectUrl:
"https://partner.example/klarna-redirect?confirmation_token={klarna.payment_request.payment_confirmation_token}&request_id={klarna.payment_request.id}&state={klarna.payment_request.state}&reference={klarna.payment_request.payment_reference}"
}

These placeholders enable the redirect URL to dynamically incorporate all necessary transaction details. Klarna replaces these placeholders with actual values prior to redirection, facilitating a smooth redirection process for partners and ensuring that all critical information is accessible for processing the transaction. Details about the available placeholders are provided below:

Payment request updates

A payment request can be initiated either directly by the Klarna Partner, using the Klarna Payment Services, or implicitly through the Klarna payment button interface:

• Once the Web SDK is loaded and a payment request is created, that same it is used throughout the entire session.
• The payment request cannot be retrieved server-side if it is shared with Klarna when the initiate() method is called.
• When using the Klarna payment button, the initial payment request is passed in the click handler. The click handler allows you to modify the payment request data and choose if you want to initiate the payment.

Both the request() and initiate() methods share the same set of input parameters.

• request(paymentRequestData?, options?): Request
• initiate(paymentRequestData?, options?): Promise<void>

The payment request data allows the Klarna Partner to provide properties for the ongoing purchase.

Consult the SDK reference for a complete description of the request body parameters.SDK reference for a complete description of the request body parameters.

When using the Klarna payment button, the initial payment request is passed in the click handler, where you can modify the request and initiate it. Configurations available for the request are detailed below.
<div style="flex: 1; padding: 10px;">

klarnaPaymentButton.on("click", async (paymentRequest) => {
  paymentRequest.initiate(
    {
      paymentAmount: 9999,
      currency: "EUR",
      config: {
      redirectUrl:      "https://example.com?id={klarna.payment_request.id}andtoken={klarna.payment_request.payment_confirmation_token}"
      }
    },
    {

</div>

Upon being redirected, the customer will enter Klarna's payment flow, where they can select their payment method and provide any required information. This process may also involve signing into their Klarna account to continue with the payment.

To start the purchase flow a payment request must be created. This request ensures that all necessary information is provided for a successful transaction. To start the process send a POST request to /v2/accounts/{account_id}/payment/requests.

The following data points are required for a successful request:

Consult the API reference for a complete description of the request body parameters.API reference for a complete description of the request body parameters.

When the payment request has been successfully created, Klarna will return an HTTP 201 CreatedHTTP 201 Created. The response body will contain the payment_request_id as well as the state_context.distribution.url to which the customer should be redirected to.

If the payment request ends up at SUBMITTED, the Partner should redirect the customer to the start link provided in the response. This link is located at state_context.payment_distribution.url in the response of the  Step 2: Create a payment request server-side

Shopping journey

Upon being redirected, the customer will enter Klarna's payment flow. This flow allows the customer to choose their payment method and input any necessary information. The process also requires the customer to log in to their Klarna account, if needed, to proceed with the payment.

After completing these steps, the customer is redirected to the URL specified in the config.redirect_url. This URL is provided in the initial payment request and ensures the customer returns to the Partner's site after a successful transaction.
<div style="flex: 1; padding: 10px;">

"config": {
   "redirect_url": "https://merchant.com?authorization_token={klarna.payment_request.payment_confirmation_token}"
}

</div>