Iframe events

The following events may be emitted by various Nexio iframes.

For an example of how to create an event listener for one or more of these, see Creating an event listener below.

The "Iframe" column lists the iframe(s) that may emit that event. If 'All' is listed, that event applies to all of the following iframes:

Iframe events table

The following table shows events and iframes, with information about each one.

EventIframeDescriptionExample Event Response
cardSavedSave Card, Retail Save CardThe card token has successfully been saved
eCheckProcessedRun Echeck TransactionThe echeck has successfully been processed
eCheckSavedSave EcheckThe echeck token has successfully been saved
errorAllAn error has occurredeventName: error
{
  "error": 481,
  "message": "User canceled 3DS"
}
fingerprintPostedAllDevice fingerprinting informationeventName: fingerprintPosted
{
  "fingerprint": {
    "dateCreated": "2022-04-08T21:39:23.835Z",
    "reach": "b9cf3f82-cbbe-492e-bc03-16efebc41eee",
    "ipAddress": "205.197.212.250",
    "payments_os_colombia": "dd2ac704e3b840d6b7ddc7eb37f2e686",
    "openpay": "aR9lkjkf2JPYr4FyB8Ipj75oF6B6KoDY",
    "key": "31b0441b-6b5d-43c6-9d03-33b7b2ea1203",
    "kount": "31b0441b6b5d43c69d0333b7b2ea1203"
  }
}
formValidationsAllIndicates form validation success or error per form field and for the form overall.

You can check for true for one or more individual form fields or check for true for only isFormValid to know that all fields have been validated
eventName:formValidations
{
  billToAddressOneValid: true
  billToAddressTwoValid: true
  billToCityValid: true
  billToCountryValid: true
  billToPostalValid: true
  billToStateValid: true
  cardExpirationValid: true
  cardHolderNameValid: true
  cardNumberValid: false
  cardSecurityCodeValid: false
  cardTypeValid: false
  isFormValid: false
}
loadedAllThe iframe has finished loadingeventName: loaded
{}
initiateAPMsThe user clicks 'confirm' to be redirected to the APM or 3DSeventName: initiate
{
  message: ‘user initiated 3ds’
}
processedRun Card TransactionThe card transaction has been processed
submitAllThe form has been submittedeventName: submit
{
  "cardHolderName": "Default Test",
  "customer": {
    "billToCity": "Testerville",
    "billToState": "UT",
    "billToCountry": "US",
    "billToAddressTwo": "Suite 123",
    "billToAddressOne": "123 Test St",
    "billToPostal": "12345"
  }
}
successRetail Run Card TransactionThe card transaction has been processed

Creating an event listener

The following is an example of how to create an event listener.

This listener is checking that the iframe has finished loading and that the entire form has been validated. You could use something like this to make your submit button inactive so that users cannot click on it until the form errors are corrected.

window.addEventListener('message', function messageListener(event) {
  if (event.origin === iframeUrl) {
    const eventData = event.data?.data;
	const eventType = event.data?.event;

	if (eventType === ‘loaded’) {
	  // iframe successfully loaded.
	}

	if (eventType === ‘formValidations’) {
	  const jsonData = JSON.parse(eventData);
	  if (jsonData.isFormValid) {
	    // form is ready to submit.
			}
      }
	  // switch on event.data properties
      // (e.g. loaded, formValidations, error)
    }
});