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:
- Save card token
- Run card transaction
- Save echeck token
- Run echeck transaction
- Retail save card
- Retail run card transaction
- Alternative Payment Methods (APMs)
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)
}
});
Updated 4 months ago