3DS Integration Mode Description
Example for 3ds method（result.action=IdentifyShopper）
Post parameters
The 3DS Method allows for additional browser information to be gathered by an ACS prior to receipt of the AReq message to help facilitate the transaction risk assessment. The use of the 3DS Method by an ACS is optional.
As EMVCo 3DS specification mentioned, the 3DS Requestor should render a hidden HTML iframe in the Cardholder browser and send a form with a field named threeDSMethodData containing the JSON Object via HTTP POST to the ACS 3DS Method URL.
The 3DS requestor receives the 3DS method device collection completion request sent by the ACS within the specified time (for example, 5-second), and sets threeDSCompInd to "Y". If the request is not received within the time, threeDSCompInd should be set to "N". The status of this field needs to be sent in the AReq message request.
Example Code
Create a hidden iframe and post 3DS Method to the ACS, monitor the response every 500 ms. If there is no response from the ACS in 5000 ms, pass the 3DS Method process and do the AReq.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// If 3ds method URL is empty,
// 3ds requestor can pass 3DS method processing and threeDSCompInd=U
var threeDSCompInd = "${threeDSCompInd}";
if (threeDSCompInd == "U") {
submitForm1(threeDSCompInd);
return;
}
// send 3DS Method request in iframe
var iframe = $("#3dsmethod");
var formContent = ""
.concat("<form name='form2' id='form2'
action = '${threeDSMethodUrl}'
method = 'post' > ")
.concat(" <input type='hidden' name='threeDSMethodData'
id = 'threeDSMethodData'
value = '${threeDSMethodData}' / > ")
.concat("</form>"); iframe.contents().find('body').html(formContent); iframe.contents().find('#form2').submit();
// monitor 3DS Method response
var t1 = window.setInterval(function() {
console.log('monitor method result.');
console.log($("#3dsmethod").attr("src"));
if ($("#3dsmethod").contents().find('#threeDSCompInd').val() == "Y") {
console.log('monitor method result GOTTEN.');
window.clearInterval(t1);
window.clearTimeout(t2);
threeDSCompInd = "Y";
submitForm1(threeDSCompInd);
}
}, 500);
// if reach timeout setting, set threeDSCompInd = N and go next step
var t2 = window.setTimeout(function() {
console.log('monitor timeout.');
if (threeDSCompInd != "Y")
threeDSCompInd = "N";
window.clearInterval(t1);
window.clearTimeout(t2);
submitForm1(threeDSCompInd);
}, 5 * 1000);
});
//next step
function submitForm1(threeDSCompInd) {
console.log('before form1 submited, threeDSCompInd =',
threeDSCompInd);
$("#threeDSCompInd").val(threeDSCompInd);
$("#form1").submit();
}
</script>
</head>
<body>
<div>
<form id="form1" name="form1" action="${next step URL}" method="post">
<input type="hidden" name="threedsIntegratorOid" id="threedsIntegratorOid" value="${threedsIntegratorOid}" />
<input type="hidden" name="threeDSCompInd" id="threeDSCompInd" value="" />
</form>
</div>
<div id="iframe_3dsmethod">
<iframe
id="3dsmethod"
src="about:blank"
allow="geolocation"
frameborder="0"
allowfullscreen="true"
style="width: 100%; height: 0vh; position: relative; border-width:
0px"
>
</iframe>
</div>
</body>
</html>Post Creq Example（result.action=ChallengeShopper）
Post parameters
creq: Base64url encodethreeDSSessionData: 3DS Requestor session data that is returned by the ACS in the CRes message POST to the 3DS Requestor. Optionally used to accommodate the different methods 3DS Requestor systems handle session information.
AcsURL Example
https://{host}:8050/acs-auth-web/challenge/brw/V/210/1/123/creq
ACS request
(creq): eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiI4OGVmNGIyNC1iOWRkLTQ0YTAtOTk2Yi1jYTYxMDcyYTFjOTIiLCJhY3NUcmFuc0lEIjoiMTE4ZDNiNjEtYjU5Ny00Nzg2LTg1ZWMtNzA0Mzc3ZDhjMWU4IiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjAyIn0=
The Browser challenge will occur within the Cardholder’s browser, and the ACS will provide a formatted challenge UI to the Cardholder within the browser challenge window.
For a better user experience, the 3DS Requestor can create an HTML iframe for challenge in the Cardholder browser and close the challenge window upon receiving the CRes message by refreshing the parent page, and removing the HTML iframe.
Example Code
Generate an HTTP POST cardholder browser to ACS challenge page.
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#form1').submit();
});
</script>
</head>
<body>
<div>
<form id="form1" name="form1" action="${acsURL}" method="post">
<input type="hidden" name="creq" value="${creq}" />
<input type="hidden" name="threeDSSessionData" value="${threeDSSessionData}" />
</form>
</div>
</body>
</html>ACS response: similar pages will be displayed
