<body>
<div id='threedsChallengeRedirect' xmlns='http://www.w3.org/1999/html' style=' height: 100vh'>
<form id='threedsChallengeRedirectForm' method='POST' action='' target='challengeFrame'>
<input type='hidden' name='creq' id="creq" value=''/>
</form>
<iframe id='challengeFrame' name='challengeFrame' width='100%' height='100%'></iframe>
</div>
<script>
const cardNumber = "4187451844054629"; // Card Number
const expiryMonth = "07"; // Card Expiry Month
const expiryYear = "32"; // Card Expiry Year
const securityCode = "100"; // Card Security Code
//const pin = "1000"// Card PIN //For NGN cards
var myHeaders = new Headers();
myHeaders.append("Authorization", "Payaza UFo3OC1QS0xJhsksksMjFFNEYtQ0VCNy00MjAzL4MDktQkU1NEM3NDY1RDRB");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
"service_type": "Account",
"service_payload": {
"first_name": "John",
"last_name": "Doe",
"email_address": "johndoe@email.com",
"phone_number": "090121980906",
"amount": 11,
"transaction_reference": "PL-1KBPSCJCR" + Math.floor(
(Math.random() * 10000000) + 1
),
"currency": "NGN",
"description": "Test for 3DS",
"card": {
"expiryMonth": expiryMonth,
"expiryYear": expiryYear,
"securityCode": securityCode,
"cardNumber": cardNumber,
//"pin": pin //For NGN cards
}
}
});
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://api.payaza.africa/live/card/card_charge/", requestOptions).then(response => response.text()).then(result => {
result = JSON.parse(result);
if (result.statusOk) { // ///Handle Success Response
const creq = document.getElementById("creq");
creq.value = result.formData;
const form = document.getElementById("threedsChallengeRedirectForm");
form.setAttribute("action", result.threeDsUrl);
form.submit();
} else { // ///Handle Error
console.log("Error found", result.debugMessage)
alert("Payment Failed: " + result.debugMessage)
}
}).catch(error => {
console.log("Error", error)
alert("Exception Error: " + error.debugMessage)
});
/ ///////////Internal Payment Notification
window.addEventListener("message", (event) => {
console.log("::::::::::::::::::MESSAGE EVENT GOT BACK FROM BACK-END::::::::::::::::::::::")
try{
const response = JSON.parse(event.data);
console.log("Payment Notification", response)
if (response.statusOk !== undefined) {
if (response.statusOk === true && response.paymentCompleted === true) { // ////Handle payment successful, do business logic
alert("Payment Successful")
} else { // ///Handle Failed payment
alert("Payment Failed")
}
}
}catch(error){
console.log("Error from Parsing JSON",error)
}
});
</script>
</body>
