iFrame Post Messaging

iFrame Post Message Events

While the iFrame is mounted, there are a list of events that will be emitted from the iFrame as the user tries to submit the page. This includes the events below:

• CARD_VALIDATION_START: This will be emitted when the user clicks the "Verify Card" button.
• CARD_VALIDATION_STOP_SUCCESS: This will be emitted after the user has succesffuly verified their card information.
• CARD_VALIDATION_STOP_FAIL: This event will be emitted have the user has tried to verify their card but has received a failure with the information provided.
• CARD_VALIDATION_STOP_EXPIRED: This event will be emitted when the expiration time and date for the card-onboarding-session has passed and the session will no longer work.

Example: How to Listen for iFrame Events

Below is an example of how you can listen for these iFrame events to be emitted and react appropriately based on your implementation.

A snippet like the one below must be placed above the <iframe> snippet on the page and this example assumes the iframe is using an id of card-validation-iframe.

window.addEventListener('message', message => {
    if (message.data === 'CARD_VALIDATION_START') {
        // do something on succesffuly verification.
    }
     if (message.data === 'CARD_VALIDATION_STOP_SUCCESS') {
        // do something on verification falure.
    }
     if (message.data === 'CARD_VALIDATION_STOP_FAIL') {
        // do something when verification has failed
    }
     if (message.data === 'CARD_VALIDATION_STOP_EXPIRED') {
        // do something when the card on-boarding session has expired.
    }
});