Klarna Web SDK v2
    Preparing search index...

    Interface Transaction

    interface Transaction {
        on(event: "widgeterror", callback: OnWidgetErrorCallback): void;
        on(event: "widgetcomplete", callback: OnWidgetCallback): void;
        on(event: "widgetcancel", callback: OnWidgetCallback): void;
        widget(widgetToken: string): void;
    }
    Index
    on widget

    • Parameters

      Returns void

      "Register an event handler for the widgeterror event. Anytime an error occurs during the widget flow, the error event is triggered. If you define the error event handler, Klarna emits all errors to it instead of throwing them upwards in the widget method.

      Register this handler before calling {@docs-portal-link Customer.Transaction.widget} so that errors during widget initialization are captured."

      label="Example"

      klarna.Customer.Transaction.on("widgeterror", async (error, widgetData) => {
        console.error("Widget error:", error.errorMessage);

        if (widgetData.status === "NO_STATE_CHANGE") {
          // The widget encountered an error but the payment state is unchanged
          // You may retry or show an error message to the customer
        }
      });

      Customer

      Customer.Transaction.onWidgetError

      Customer

      general-availability

      Customer.Transaction.onWidgetError

      true

      true

    • Parameters

      • event: "widgetcomplete"

        The event name.

      • callback: OnWidgetCallback

        Event callback handler.

      Returns void

      "Triggers when the widget closes and the widget state has changed. A STATUS_CHANGE status in the callback data indicates the customer completed the action (e.g. approved a payment or updated their details). Use this to refresh your UI or proceed with the next step in your flow."

      label="Example"

      klarna.Customer.Transaction.on("widgetcomplete", async (widgetData) => {
        if (widgetData.status === "STATE_CHANGE") {
          // The customer completed the action — refresh order status
          await refreshOrderStatus();
        }
      });

      Customer

      Customer.Transaction.onWidgetComplete

      Customer

      general-availability

      Customer.Transaction.onWidgetComplete

      true

      true

    • Parameters

      • event: "widgetcancel"

        The event name.

      • callback: OnWidgetCallback

        Event callback handler.

      Returns void

      "Triggers when the widget closes and the payment state has not changed. This typically means the customer dismissed or closed the widget without completing the action. The NO_STATE_CHANGE status confirms that no updates occurred — your application can safely treat this as a no-op."

      label="Example"

      klarna.Customer.Transaction.on("widgetcancel", async (widgetData) => {
        // widgetData.status will be "NO_STATE_CHANGE"
        console.log("Customer closed the widget without completing the action.");
      });

      Customer

      Customer.Transaction.onWidgetCancel

      Customer

      general-availability

      Customer.Transaction.onWidgetCancel

      true

      true

    • Parameters

      • widgetToken: string

        A token received from Klarna API that authenticates the widget.

      Returns void

      "Load the Klarna widget for the action. The widget token is obtained from the Klarna API on your server and authenticates the widget session.

      Register your event handlers (widgeterror, widgetcomplete, widgetcancel) before calling this method so that all events are captured from the start.

      The z-index of elements in the application page calling widget() should not exceed 10000."

      label="Example"

      // 1. Register event handlers first
      klarna.Customer.Transaction.on("widgeterror", async (error, widgetData) => {
        console.error("Widget error:", error.errorMessage);
      });

      klarna.Customer.Transaction.on("widgetcomplete", async (widgetData) => {
        if (widgetData.status === "STATE_CHANGE") {
          await refreshOrderStatus();
        }
      });

      klarna.Customer.Transaction.on("widgetcancel", async (widgetData) => {
        console.log("Customer closed the widget.");
      });

      // 2. Then load the widget with the token from your server
      klarna.Customer.Transaction.widget("eyJhbGciOi...");

      Customer

      Customer.Transaction.widget

      Customer

      general-availability

      Customer.Transaction.widget

      true

      true

    Settings
    Member Visibility

    On This Page
    Methods