Interface KlarnaPaymentButton

Interface to the Payment Button interface.

From the click event handler you should trigger initiate.

Example

klarna.Payment.button().on("click", (button) => {
  Klarna.Payment.initiate({
    currency: "USD",
amount: 1000
  });
});
Copy

Note that awaiting any asynchronous code before the initiate call in the click handler will prevent popups from opening which will affect user experience negatively.

If you need to asynchronously fetch data before the click handler runs, you can use the render event and disable the button during the fetching. You should indicate to the consumer that data is loading if using this pattern.

Example of fetching cart asynchronously data on-load

klarna.Payment.button({ id: "my-button" }).on("render", async (button) => {
  button.toggleState('disabled', true);
  button.toggleState('loading', true);
  const response = await fetch("http://example.com/basket")
  const cart = await response.json();
  button.data["mycart"] = cart;
  button.toggleState('disabled', false);
  button.toggleState('loading', false);
}).on("click", (button) => {
  return Klarna.Payment.initiate({
    currency: button.data["mycart"].cartCurrency,
amount: button.data["mycart"].totalCartAmount;
  });
}).mount('#button-container');
Copy

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