Error Handling

Things don't always go smoothly, so sometimes there will be errors within the frames that you need to be aware of.

Here is an example of subscribing to the OnValidated event and registering a function to handle the event (updateErrors). Please note: The event needs to be registered on the placeholder element that the element is injected into. Registering in the wrong place may mean you miss the event.

document.getElementById('cardCaptureCardNo').addEventListener(FRAMES.FramesEventType.OnValidated, updateErrors);

Update errors might look something like this (Pure JS example):

async function updateErrors() {
    if (action.errors()) { 
        document.getElementById('cardCaptureErrors').innerHTML = "<ul>"

        for (error of action.errors()) {
            document.getElementById('cardCaptureErrors').innerHTML += `<li>${error}</li>`;
        }

        document.getElementById('cardCaptureErrors').innerHTML += "</ul>"
    } else {
        document.getElementById('cardCaptureErrors').innerHTML = "";
    }
}

Here is a basic mapping of the errors that are returned by the validation

errorMap: {
    'Card Number Required': 'Please enter a valid card number.',
    `Invalid Card Number`: 'Please enter a valid card number.',
    'Invalid Expiry': 'Please enter a valid expiry.',
    'Incomplete Expiry': 'Please enter a valid expiry',
    'Expired card': 'The expiry entered is in the past. Please enter a valid expiry.',
    'Invalid CVV': 'Please enter a valid CVV.'
}