SDK Callback Events

Trustly supports an addPanelListener function which can be used to track various lightbox events. It can also be used to intercept the returnUrl and cancelUrl calls to process those events via Javascript directly (versus doing a redirect to the URL itself).

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

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.

Did this page help you?