3D Secure handling

Kashier sends the response.authentication object, which includes redirectUrl and redirectHtml. The redirectUrl key is a URL used to handle the 3D Secure flow.

Follow the steps below

Pass the redirectUrl value from your server side to the frontend.
Add the HTML code snippet to your frontend to display the 3D Secure.

Insert the value of the redirectUrl key inside your HTML.

<iframe 
  style='z-index: 1000; width: 100%; height: 100vh;'
  src='response.authentication.redirectUrl' frameborder='' allowfullscreen=''>
</iframe>

JavaScript snippet for handling Kashier's response and opening the 3DS frame:

const authentication = data.response && data.response.authentication;

if (authentication && authentication.redirectUrl) {
    // Preferred: point the 3DS iframe at the ACS redirect URL
    $('#3ds_iframe').attr('src', authentication.redirectUrl);
    $('#3ds_iframe').addClass('show').removeClass('hide');
} else if (authentication && authentication.redirectHtml) {
    // Fallback: render the self-submitting HTML form Kashier returns
    const frame = document.getElementById('3ds_iframe');
    frame.srcdoc = authentication.redirectHtml;
    $('#3ds_iframe').addClass('show').removeClass('hide');
}

JavaScript snippet for handling the 3D Secure response:

function iFrameMessageListener(e) {
    var iFrameMessage = e.data;
    console.log(iFrameMessage);
    // 3D Secure Return Cases
    if (iFrameMessage.message == 'merchantStoreRedirect' && iFrameMessage.params) {
        // Remove 3ds_iframe
        $('#3ds_iframe').addClass('hide').removeClass('show');
        switch (iFrameMessage.params.status) {
        case 'SERVER_ERROR' || 'INVALID_REQUEST': // Failed Authentication or other errors
            // Write your code in case of failed payment
            break;
        case 'SUCCESS': // Succeeded in payment authentication
            if (
                iFrameMessage.params.response &&
                iFrameMessage.params.response.card.result == 'SUCCESS'
            ) {
                let parsedRedirectUrl = iFrameMessage.redirectUrl.replace(/&amp;/g, '&');
                // Write your code in case of successful payment
            } else {
                // Write your code in case of failed payment
            }
            break;
        default:
            displayMessage(false, __frameMessage('error.please.check.card.info'));
            // Write your code in case of failed payment
            break;
        }
    }
}
if (window.addEventListener) {
    addEventListener('message', iFrameMessageListener, false);
} else {
    attachEvent('onmessage', iFrameMessageListener);
}

Follow the steps below

On this page