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.

Event	Iframe	Description	Example Event Response
`cardSaved`	Save Card, Retail Save Card	The card token has successfully been saved
`eCheckProcessed`	Run Echeck Transaction	The echeck has successfully been processed
`eCheckSaved`	Save Echeck	The echeck token has successfully been saved
`error`	All	An error has occurred	eventName: error { "error": 481, "message": "User canceled 3DS" }
`fingerprintPosted`	All	Device fingerprinting information	eventName: 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" } }
`formValidations`	All	Indicates 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 }
`loaded`	All	The iframe has finished loading	eventName: loaded {}
`initiate`	APMs	The user clicks 'confirm' to be redirected to the APM or 3DS	eventName: initiate { message: ‘user initiated 3ds’ }
`processed`	Run Card Transaction	The card transaction has been processed
`submit`	All	The form has been submitted	eventName: submit { "cardHolderName": "Default Test", "customer": { "billToCity": "Testerville", "billToState": "UT", "billToCountry": "US", "billToAddressTwo": "Suite 123", "billToAddressOne": "123 Test St", "billToPostal": "12345" } }
`success`	Retail Run Card Transaction	The 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)
    }
});