Type Alias KlarnaPaymentButton

Type declaration

• htmlElement: HTMLElement

  The actual custom element rendered in the DOM

• id: string | undefined

  Unique button identifier

• mount:function

  • mount(container: string | HTMLElement): KlarnaPaymentButton

  • Programmatically adds a button to the DOM tree.

    Timings:

    • When using mount(), the render event is triggered after the button is fully visible.

    Parameters

    • container: string | HTMLElement

      The container element or selector where the button will be mounted.

    Returns KlarnaPaymentButton

    • The instance of the mounted Klarna payment button.

• on:function

  • on(
        event: "render",
        callback: (button: KlarnaPaymentButton) => Promise<void>,
    ): KlarnaPaymentButton

  • The render event can be used to load in data asynchronously that would

    Parameters

    • event: "render"

      render
    • callback: (button: KlarnaPaymentButton) => Promise<void>

      Render event handler callback, triggered on render.

    Returns KlarnaPaymentButton
  • on(
        event: "click",
        callback: (
            paymentRequest: PaymentRequest,
            button: KlarnaPaymentButton,
        ) => PaymentRequest,
    ): KlarnaPaymentButton

  • Button click event handler, triggered when the consumer clicks a payment button.

    From the event handler you should trigger initiate or prepare. If you do not wish to proceed with the payment request you may return from the handler without triggering any action.

    Example

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

    Note that the handler must run synchronously for the payment flow to be able to be able to open a popup window. If you are distributing with a QR code you may run asynchronous code inside the handler, but wrapped in then/catch.

    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('loading', true);
      button.toggleState('disabled', true);
      const response = await fetch("http://example.com/basket")
      const cart = await response.json();
      button.data["mycart"] = cart;
      button.toggleState('loading', false);
      button.toggleState('disabled', false);
    }).on("click", (paymentRequest, button) => {
      return paymentRequest.initiate({
        currency: button.data["mycart"].cartCurrency,
        paymentAmount: button.data["mycart"].totalCartAmount;
      });
    }).mount('#button-container');
    Copy

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

    Parameters

    • event: "click"

      click
    • callback: (paymentRequest: PaymentRequest, button: KlarnaPaymentButton) => PaymentRequest

      Click event handler callback

    Returns KlarnaPaymentButton

• toggleState:function

  • toggleState(state: PaymentButtonState, value?: boolean): KlarnaPaymentButton

  • Parameters

    • state: PaymentButtonState

      State "disabled" disables/enables the button, e.g. makes it non-interactive/interactive State "loading" state displays/hides the loading indicator in the button
    • Optionalvalue: boolean

      can be used to set the state to a specific value instead of toggling

    Returns KlarnaPaymentButton

• unmount:function

  • unmount(): KlarnaPaymentButton

  • Removes the button from the DOM tree.

    Returns KlarnaPaymentButton