GET
The 3DS Requestor requests Challenge initialization data from D8 3DSS.
Creates CReq and returns HTML which will automatically call ACS URL.
| Name | Pattern | Mandatory | Description |
|---|---|---|---|
| threeDSServerTransID | Length: 36 characters JSON Data Type: String Value accepted: Canonical format as defined in IETF RFC 4122. May utilise any of the specified versions if the output meets specified requirements |
Mandatory | A unique identifier for the transaction that will be the same as the 3DS Server Transaction ID in the AReq |
| challengeWindowSize | Length: 2 characters JSON Data Type: String Values accepted: • 01 = 250 x 400 • 02 = 390 x 400 • 03 = 500 x 600 • 04 = 600 x 400 • 05 = Full screen |
Mandatory | Dimensions of the challenge window that has been displayed to the Cardholder. The ACS shall reply with content that is formatted to appropriately render in this window to provide the best possible user experience. Preconfigured sizes are width x height in pixels of the window displayed in the Cardholder browser window. |
Browser-based: A CReq message is formed by the 3DS Server and is posted through the Cardholder’s browser by the 3DS Requestor to the ACS URL received from the ARes message.
App-based: A CReq message is formed by the 3DS SDK and is posted to the ACS URL received from the ARes message.
http://10.102.102.75:7690/api/challenge/6e8b3d3a-1dc1-4dbf-b787-59daad31b059?challengeWindowSize=05
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>creqForm</title>
<style>
.logoImage {
display: block;
width: 40%;
margin-left: auto;
margin-right: auto;
}
.spinner {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
text-align: center;
-webkit-animation: sk-rotate 2.0s infinite linear;
animation: sk-rotate 2.0s infinite linear;
}
.dot1,
.dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
animation: sk-bounce 2.0s infinite ease-in-out;
}
.dot2 {
top: auto;
bottom: 0;
-webkit-animation-delay: -1.0s;
animation-delay:-1.0s;
}
@-webkit-keyframes sk-rotate {
100% {
-webkit-transform: rotate(360deg)
}
}
@keyframes sk-rotate {
100% {
transform: rotate(360deg);
-webkit-transform: rotate(360deg)
}
}
@-webkit-keyframes sk-bounce {
0%,
100% {
-webkit-transform: scale(0.0)
}
50% {
-webkit-transform: scale(1.0)
}
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}
50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>
</head>
<body>
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
<form method="POST" th:action="${acsUrl}" id="creqForm" style="display: none;">
<input type="text" name="creq" id="creq" th:value='${creq}'/>
<input type="submit" value="submit">
</form>
<script>
var form = document.getElementById('creqForm');
form.submit();
</script>
</body>
</html>