Interface KlarnaPayment

The button interface allows programmatic access to the button interface

const klarna = ...;
klarna.Payment.button()
 .on("click", (button) => {
   // Button click handler
 })
 .mount("#button-container");
Copy

<div id="#button-container"></div>
Copy

Cancels the payment request with the given ID. It's only possible to cancel payment requests created by the same client/credentials.

Fetches the payment request with the given ID. It's only possible to fetch payment requests created by the same client/credentials.

Initiates a payment request.

Unregister an event handler for the given event.

Register an event handler for the abort event. A payment request is aborted when the customer decides to cancel the payment request by closing the popup or somehow cancel the process.

• Example

klarna.Payment.on("abort", (paymentRequest) => {
  console.log(`The reason for the abort may be read by accessing ${paymentRequest.stateReason}`);
});
Copy

Register an event handler for the complete event. A payment request is completed when the user has approved the purchase.

During a redirection flow the complete handler will trigger once your page has loaded on the success page. Pending updates are triggered even if the event handler is registered after the page has loaded to avoid need for polling.

Example

klarna.Payment.on("complete", (paymentRequest) => {
  console.log(`Confirm the payment request by sending the ${paymentRequest.stateContext.paymentToken} to your backend`);
  // Return false if you want to prevent the redirection to the success page, if not, return anything or true.
  return false
});
Copy

Shipping address changed event handler, triggered when the consumer changes their shipping address during the payment flow.

Depending on your implementation you can return 3 different payloads from the handler.

1. If there is no preselected shipping option you should only provide a list of available shipping options.

Example

klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
 return {
  shippingOptions: [{
   shippingOptionReference: string;
   amount: number;
   displayName: string;
   description: string;
   shippingType?: ShippingType;
  }]
 }
});
Copy

2. If you can preselect one shipping option for the provided address, the whole flow is shorter. Then you should return not only the shipping option, but also the order payload updated with shipping details.

Example

klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
  const { shippingOptions } = fetch("/shipping-options", {
    method: "POST",
    body: {
      shipping_address: shippingAddress
    }
  })
  const selectedShippingOption = shippingOptions[0]
amount } = fetch("/cart", {
    method: "POST",
    body: {
      shipping_option: shippingOptions[0]
    }
  })

  return {
amount,
    lineItems: [
      ...lineItems,
      {
        name: selectedShippingOption.name,
        quantity: 1,
        totalAmount: selectedShippingOption.amount
      }
    ],
    selectedShippingOptionReference: selectedShippingOption.reference
    shippingOptions: [{
     shippingOptionReference: string;
     amount: number;
     displayName: string;
     description: string;
     shippingType?: ShippingType;
    }]
  }
});
Copy

3. If the shipping address provided cannot be handled due to some constraints, you can reject it by returning the following.

Example

klarna.Payment.on("shippingaddresschange", (paymentRequest, shippingAddress) => {
  return {
    rejectionReason: klarna.Payment.ShippingRejectionReason.POSTAL_CODE_NOT_SUPPORTED
  }
});
Copy

The available rejection reasons are:

• POSTAL_CODE_NOT_SUPPORTED
• CITY_NOT_SUPPORTED
• REGION_NOT_SUPPORTED
• COUNTRY_NOT_SUPPORTED
• ADDRESS_NOT_SUPPORTED

If you did not return anything during the 10 seconds after receiving this event, consumer will see the error screen and payment request will be aborted.

Shipping option selected event handler, triggered when the consumer selects a shipping option during the payment flow.

Depending on your implementation you can return 2 different payloads from the handler:

1. If the shipping option is correct, return the order payload updated with shipping details.

Example

klarna.Payment.on("shippingoptionselect", (paymentRequest, shippingOption) => {
amount } = fetch("/cart", {
    method: "POST",
    body: {
      shipping_option: shippingOption
    }
  })

  return {
amount,
    lineItems: [
      ...lineItems,
      {
        name: 'Shipping option 1',
        quantity: 1,
        totalAmount: 500
      }
    ]
  }
});
Copy

2. If the shipping option provided cannot be handled due to some constraints, you can reject it by returning the following.

Example

klarna.Payment.on("shippingoptionselect", (paymentRequest, shippingAddress) => {
  return {
    rejectionReason: klarna.Payment.ShippingOptionRejectionReason.INVALID_OPTION
  }
});
Copy

The available rejection reasons are:

• INVALID_OPTION

If you did not return anything during the 10 seconds after receiving this event, consumer will see the error screen and payment request will be aborted.

Check if the consumer can make a payment with a given a set of parameters.