User Event Listeners

The Trustly SDK provides an addPanelListener function which can be used to track various user events within the Lightbox experience. It can also be used to intercept the returnUrl and cancelUrl callback functions in order to process those events via Javascript directly rather than responding upon the user being redirected.

Add the addPanelListener function

You can use the addPanelListener function of the SDK to provide a custom handler to deal with lightbox events.

Supported notifications and event types

Example Listener code

🚧

Warning

The Javascript window event notification call below only works on native apps if Trustly SDK is used or if the merchant implements the creation of new windows.

Trustly.addPanelListener((command, obj) => {
  switch(command) {
    case "open":
      console.log("Lightbox will open");
      break;

    case "event":
      switch(obj.type) {
        case "load":
          console.log(
            "Lightbox page " + obj.page +
            " finished loading for transaction " +
            obj.transactionId
          );
          break;

        case "bank_selected":
          console.log(
            "Payment provider having id " + obj.data +
            " was selected on the page " + obj.page +
            " for transaction " + obj.transactionId
          );
          break;

        case "back":
          console.log(
            "Back button was clicked on the lightbox page " +
            obj.page + " for transaction " + obj.transactionId
          );
          break;

        case "close":
          console.log(
            "Lightbox close process was initiated " +
            "on the lightbox page " + obj.page +
            " with reason " + obj.data +
            " for transaction " + obj.transactionId
          );
          break;

        case "new_location":
          console.log("Browser will be redirected to " + obj.data);
          break;
      }
      break;

    case "close":
      console.log("Lightbox was closed");
      break;
  }
});

The following notifications are supported:

  • open - Triggered immediately when the Trustly Lightbox opens
  • close - Triggered when the Trustly Lightbox finishes closing
  • event - Triggered when an event is processed by the Trustly Lightbox.

The following events are handled by the SDK:

Event TypeNotification DataDescription
load{ type: "load", page: pageName, transactionId: transactionId }Triggered when a page finishes loading. pageName will contain the name of the page that finished loading. transactionId will be the transaction id of the bank authorization that is in progress.
bank_selected{ type: "bank_selected", page: pageName, transactionId: transactionId, data: paymentProviderId transfer: { paymentProvider: { id: paymentProviderId, name: paymentProviderName } }Triggered when a user selects a bank. pageName will contain the name of the page that finished loading. transactionId will be the transaction id of the bank authorization that is in progress. paymentProviderId will be the Trustly identifier of the bank selected. transfer will contain data that is returned as part of the message. transfer.paymentProvider will contain details about the bank selected (id and name).
back{ type: "back", page: pageName, transactionId: transactionId }Triggered when a user navigates to the previous page in the flow. pageName will contain the name of the page that finished loading. transactionId will be the transaction id of the bank authorization that is in progress.
close{ type: "close", page: pageName, transactionId: transactionId, data: reason }Triggered when a user navigates to the previous page in the flow. pageName will contain the name of the page that finished loading. transactionId will be the transaction id of the bank authorization that is in progress. reason will be "return" or "cancel". NOTE: If the reason is "return", you must keep the Lightbox visible to the user. It is possible that an error or decline may be returned, in which case the user will need to take some sort of action.
new_location{ type: "new_location", data: newLocation }Triggered when the page will be redirected to a new location. newLocation will be the returnUrl or cancelUrl values from establishData, including the added return parameters. NOTE You can use this in place of processing returnUrl and cancelUrl redirects.
loading{ type: “loading”, page: pageName, transactionId: transactionId }Triggered when page loading is active. pageName will contain the name of the page that finished loading. transactionId will be the transaction id of the bank authorization that is in progress.