Event Notifier

When the Signing Ceremony (for desktops and mobile devices) is embedded in an iFrame, the Event Notifier sends notifications to your parent window when specific actions are triggered. With such a notification, you can interrupt the workflow with your customized logic, and then resume normal activity. This is particularly useful if you want to perform actions when certain steps of the Signing Ceremony have been accomplished.

Starting the Event Notifier

You can write your OneSpan Sign Event Notifier in plain JavaScript. Your application must be listening to OneSpan Sign’s message events, as shown below:
window.addEventListener('message', receiveMessage, false);
For further study on the mechanism allowing cross-origin communication between your parent window and the iFrame, read this documentation. Next step, to define the "receiveMessage" function, your listener should be something along these lines:
function receiveMessage(event) {
      var origin = event.origin || event.originalEvent.origin;
      var data = event.data;
      console.log(data, origin);
 
      switch (data) {
            case 'ESL:MESSAGE:REGISTER':
                  event.source.postMessage('ESL:MESSAGE:ACTIVATE_EVENTS', origin);
                  break;
            default:
                  event.source.postMessage(data, origin)
                  break;
      }
}
This is the minimal code to setup Event Notifier, where the first switch case explicitly tells OneSpan Sign that you want to registered for the event listening. A common use of event notifier can be to redirect the page once your signer completed signing, which could be done by below code:
case 'ESL:MESSAGE:SUCCESS:SIGNER_COMPLETE ':
	event.source.postMessage(data, origin);
	window.location.href = "https://www.example.com"; //redirect page
	break;

Interrupting OneSpan Sign’s Normal Activity

With Event Notifier feature, some events can even be temporarily stopped as below code shows:
switch (data) {
   ...
   case 'ESL:MESSAGE:STARTED:DOCUMENT_NAVIGATION':
     // Do some customized tasks, then notify OneSpan Sign of the same event.
     setTimeout(function(){
       event.source.postMessage(data, origin);
     }, 5000);
     break;
   ...
}
For those events that can be interrupted (marked in below table), OneSpan Sign will not resume its normal activity until your parent container post back the same message by the line "event.source.postMessage(data, origin)".

Notification Event Types

The following table describes the types of notification events your event listener can listen to.
Event NameDescriptionCan Event Be Temporarily Stopped?
ESL:MESSAGE:STARTED:DOCUMENT_ACCEPTA signer has started to accept a consent or disclosure.No
ESL:MESSAGE:SUCCESS:DOCUMENT_ACCEPTA signer has successfully accepted a consent or disclosure.Yes
ESL:MESSAGE:ERROR:DOCUMENT_ACCEPTA signer has failed in their attempt to accept a consent or disclosure.No
ESL:MESSAGE:STARTED:PACKAGE_OPT_OUTA signer has started to opt out of a transaction.No
ESL:MESSAGE:SUCCESS:PACKAGE_OPT_OUTA signer has successfully opted out of a transaction.Yes
ESL:MESSAGE:ERROR:PACKAGE_OPT_OUTA signer has failed in their attempt to opt out of a transaction.No
ESL:MESSAGE:STARTED:PACKAGE_DECLINEA signer has started to decline a transaction.No
ESL:MESSAGE:SUCCESS:PACKAGE_DECLINEA signer has successfully declined a transaction.Yes
ESL:MESSAGE:ERROR:PACKAGE_DECLINEA signer has failed in their attempt to decline a transaction.No
ESL:MESSAGE:STARTED:DOCUMENT_CONFIRMA signer has started to confirm a document.No
ESL:MESSAGE:SUCCESS:DOCUMENT_CONFIRMA signer has successfully confirmed a document.Yes
ESL:MESSAGE:ERROR:DOCUMENT_CONFIRMA signer has failed in their attempt to confirm a document.No
ESL:MESSAGE:STARTED:SIGNER_COMPLETEA signer has started to complete a transaction.Yes
ESL:MESSAGE:SUCCESS:SIGNER_COMPLETEA signer has successfully completed a transaction.No
ESL:MESSAGE:STARTED:DOCUMENT_NAVIGATIONThe user has started navigating to another document.Yes
ESL:MESSAGE:SUCCESS:DOCUMENT_NAVIGATIONThe user has successfully navigated to another document.No

Get the Code

Was this information helpful?
X