Once the customer has selected Klarna and decided to proceed to the payment with Klarna, Acquiring Partners are expected to authorize the payment with Klarna and allow the customer to go through Klarna's Purchase Journey.

The following sequence usually applies:

1. Customer clicks on Klarna's Payment button to proceed to the payment with Klarna
2. Klarna calls the registered Javascript callback of the Acquiring Partner
3. Acquiring Partner calls the server-side to authorize the payment towards Klarna
4. Acquiring Partner sends back the response details from Klarna
5. The customer is redirected to Klarna's Purchase Journey

As described in the previous section, once the customer has selected the Klarna payment option in the payment selector, the Acquiring Partner will need to render the Klarna Payment Button. The Payment Authorization will be triggered once the customer clicks on the Payment button.

This requires a combination of server-side and client-side implementation from the Acquiring Partner:

• Configure the paymentButton of the Payment Presentation instance by specifying the following attributes in the authorize button click handler:
  
  • data: A function that returns a Promise resolving to an object containing the results of a call to the Payment Authorize API. The function would be triggered as the customer clicks on the payment button.
  
  • options: payment request options controlling the behavior of the Klarna Purchase Journey once launched.
  

Sample code

// Klarna Payment Presentation instance declared to build the payment selector
var paymentPresentation = Klarna.Payment.Presentation({
  currency: "USD",
  amount: 11800,
  locale: "en-US",
  intents: ["PAY"]
});

// Configure the paymentButton of the Payment Presentation instance and specify the attributes of the authorize button click handler. The data attribute is a function that returns a Promise resolving to an object containing the results of a call to the Payment Authorize API.

The authorize data attribute from the SDK requires the Acquiring Partner to call Klarna's Payment Authorize API and return the results to the client-side.

• When Partners optimize their integration with Klarna, they are likely to have an interoperability_token to share with the Acquiring Partner.
• The Acquiring Partner’s Checkout session API should expose a parameter for this as seen previously and if an interoperability_token is provided by the Partner, it must be forwarded when calling Klarna's Payment Authorize API.

In the request to the Payment Authorize API, the Acquiring Partner will specify the following parameters:

Path parameter

Header parameter

Request body

Below is an example request body for the Payment Authorize API. (interoperability token sent as an HTTP header parameter):

{
  "currency": "USD",
  "supplementary_purchase_data": { .. },
  "interoperability_data":  "<serialized-json>",
  "request_payment_transaction": {
    "amount": 11800,
    "payment_transaction_reference": "acquiring-partner-transaction-reference-1234"
  },
  "step_up_config": {
    "payment_request_reference": "acquiring-partner-request-reference-1234",

The Payment Authorize API can yield 3 different outcomes depending on the transaction and the consumer:

When the request is successful, a Payment Transaction is created on Klarna Network and will be available for post-purchase operations through the Payment Transactions API, no further customer interactions are needed and the Acquiring Partner can directly inform their partners that the payment session is completed and that the customer can be redirected to the order confirmation page.

Acquiring Partners must store the Klarna payment_transaction_id for future operations on the transaction through the Payment Transactions API, such as capture and refund. The Acquiring Partner will receive the following parameters in the response.
Response body

Sample response - APPROVED

{
  "payment_transaction_response": {
    "result": "APPROVED",
    "payment_transaction": {
      "payment_transaction_id": "krn:payment:eu1:transaction:6debe89e-98c0-[...]",
      "payment_transaction_reference": "acquiring-partner-transaction-reference-1234",
      "amount": 11800,
      "currency": "USD",
      "payment_funding": {...},
      "payment_pricing": {...}

Back to the SDK, the Acquiring Partner will return the payment transaction result and optionally a returnUrl as output to the authorize handler's data function, which the SDK will use to handle the redirection.

Sample code

const buttonConfig = {
  shape: "pill",
  theme: "dark",
  authorize: {
    data: () => {
      // The Acquiring Partner calls the Payment Authorize API endpoint which returns an APPROVED transaction
      return {
        result: "APPROVED",
        returnUrl: "https://" //optional
      }

In this scenario as the consumer clicks on the Klarna Payment button, the transaction will be immediately approved and the consumer will be redirected to the order confirmation page.

OnTransactionApprovedCallback

Acquiring Partners can also register an event handler for the transactionapproved event. This event can be used by the Acquiring Partner when the outcome of the call to the Authorize API endpoint is an approved transaction.

To implement this method, follow these steps:

• Define your callback function that will handle specific events related to the approved transaction
• Register this callback function using the on("transactionapproved", callback) method.

klarna.Payment.on("transactionapproved", () => {
  // Execute actions appropriate for an approved transaction.
});

If a transaction could not be approved by Klarna and the step-up scenario cannot be triggered (due to missing configuration or for permanent decline), the Acquiring Partner will receive a decline. Declines should not be replayed without change of context.

The Acquiring Partner should inform the Partner that the payment could not be completed and the Partner should invite the customer to select another payment method.

​Response body

Sample response - DECLINED

{
  "payment_transaction_response": {
    "result": "DECLINED"
  }
}

Back to the SDK, the Acquiring Partner will pass the payment transaction result and optionally a returnUrl as output to the authorize handler's data function, which the SDK will use to handle the redirection.
Sample code

const buttonConfig = {
  shape: "pill",
  theme: "dark",
  authorize: {
    data: () => {
      // The Acquiring Partner calls the Payment Authorize API endpoint which returns a DECLINED transaction
      return {
        result: "DECLINED",
        returnUrl: "https://" //optional
      }

The Acquiring Partner should inform the Partner that the transaction could not be completed and the Partner should invite the customer to select another payment method.

OnTransactionDeclinedCallback

Acquiring Partners can register an event handler for the transactiondeclined event. This event can be used by the Acquiring Partner when the outcome of the call to the Authorize API endpoint is a declined transaction.

To implement this method, follow these steps:

• Define your callback function that will handle specific events related to the declined transaction
• Register this callback function using the on("transactiondeclined", callback) method.

klarna.Payment.on("transactiondeclined", () => {
  // Take appropriate actions when the transaction is declined.
});

When a Payment Transaction could not be immediately created by Klarna and a step-up configuration was provided in the call to the Payment Authorization API, the Step-up scenario will be triggered and the Acquiring Partner will receive a STEP_UP_REQUIRED result.

In such scenario, the Payment Authorization API returns a Payment Request in the response. The expectation is that the customer will go through Klarna’s Purchase Journey to complete the payment, usually triggering authentication and payment option selection. The required work to properly make the step-up scenario work is outlined in the next section.

The following parameters are present in the response to the request:

​Response body

Sample response - STEP_UP_REQUIRED

{
  "payment_transaction_response": {
    "result": "STEP_UP_REQUIRED"
  },
  "payment_request": {
    "payment_request_id": "krn:payment:eu1:request:552603c0-fe8b-4ab1-aacb-41d55fafbdb4",
    "payment_request_reference": "acquiring-partner-request-reference-1234",
    "amount": 11800,
    "currency": "USD",
    "state": "SUBMITTED",

Back to the SDK, the Acquiring Partner will return the payment transaction result and  paymentRequestId as output to the authorize handler's data function, which the SDK will use to trigger the Klarna Purchase Journey as the customer clicks on the Klarna Payment Button.

Sample code

const buttonConfig = {
  shape: "pill",
  theme: "dark",
  authorize: {
    data: () => {
      // The Acquiring Partner calls the Payment Authorize API endpoint which returns a STEP_UP_REQUIRED transaction
      return {
        result: "STEP_UP_REQUIRED",
        paymentRequestId: "<payment_request_id>"
      }