HOW I CAN USE session IN Mastercard Hosted Checkout
MY CODE works, but at the end of the payment process, the message appears "Payment Unsuccessful Your transaction was unsuccessful, please check your details and try again." I think he needs to add sessions in order for the process to go well ..
<!doctype html>
<html>
<head>
<title>XXXXXX</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://banquemisr.gateway.mastercard.com/checkout/version/61/checkout.js" data-error="errorCallback" data-cancel="cancelCallback"></script>
<script type="text/javascript">
/* ############################# Config */
//Type Your commission that will be added to the real amount
let commission = 0;
//Start amount
let realAmount = 0;
//currency
let currency = "EGP";
//Goods Item name and details
let itemDescription = "XXXXXX";
//Store Name
let clietnName = document.title;//"Store Name";
//Store address 1 & 2
let clientAddress1 = "200 Sample St";
let clientAddress2 = "1234 Example Townt";
//cancel page redirect
let cancelURL = 'https://google.com';
//payment id
let idValue = '';//Math.random().toString(36).substr(2, 9);
/* ########################### End config */
function errorCallback(error) {
console.log(JSON.stringify(error));
alert(JSON.stringify(error));
}
function cancelCallback() {
console.log('Payment cancelled');
window.href = cancelURL;
}
Checkout.configure({
merchant: 'XXXXXX',
order: {
amount: function() {
//Dynamic calculation of amount
return realAmount + commission;
},
currency: currency,
description: itemDescription,
id: idValue,
},
interaction: {
operation : "PURCHASE",
merchant: {
name: clietnName,
address: {
line1: clientAddress1,
line2: clientAddress2
}
}
}
});
function makePayment()
{
realAmount = parseFloat(document.getElementById('amount').value);
document.getElementById('amount').disabled = true;
document.getElementById('pay').disabled = true;
document.getElementById('cancel').disabled = true;
Checkout.showLightbox()
return false;
}
</script>
</head>
<style>
.card-header .icons .fa-cc-discover{
color: #027878;
}
.card-header .icons .fa-cc-amex{
color: #ef6903;
}
label.labelamount{
color: #ef6903;
}
.card-body label{
font-size: 14px;
}
.submitpay{
color: #fff;
background-color: #ef6903;
width: 83%;
margin: auto;
border: 2px solid #ef6903;
border-radius: 5px;
}
.icons{
text-align: right;
}
.inputamout{
width: 85%;
}
body{
background: url("http://www.rimallytravel.com/wp-content/themes/altair/bg.jpg") no-repeat fixed center;
}
.imgbq{
margin: auto;
}
.imglogo{
width: 100%;
}
</style>
<body class="bg-danger pt-5">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4 col-10 offset-1 pl-0 pr-0">
<div class="card1">
<img class="imglogo" src="http://www.rimallytravel.com/wp-content/uploads/2017/10/ww.png" alt="logo" >
<br /><br /><br />
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-4 col-10 offset-1 pl-0 pr-0">
<div class="card">
<div class="card-header">
<div class="row">
<div class="col-md-6 col-12 pt-2">
<h6 class="m-0"><strong>Payment Details</strong></h6>
</div>
<div class="col-md-6 col-12 icons">
<img class="imgcredit" src="http://www.rimallytravel.com/wp-content/uploads/2017/10/Credit-Card-Visa-And-Master-Card-PNG-File-300x65.png" alt="banq" width="170" >
</div>
</div>
</div>
<div class="card-body">
<form onsubmit="return makePayment()">
<div class="col-md-12 col-12">
<div class="form-group">
<label class="labelamount" for="exampleInputamount"><strong>Amount</strong></label>
</br>
<input class="inputamout" type="number" min="1" step="0.01" id="amount" style="text-align: center;" required> EGP
</div>
</div>
</div>
<input class="submitpay" type="submit" id="pay" value="Pay Now">
<br />
<img class="imgbq" src="http://www.rimallytravel.com/wp-content/themes/altair/bq.png" alt="banq" width="125" >
<br />
<input type="hidden" id="cancel" onclick="cancelCallback()" value="Cancel" >
</form>
</div>
</div>
</div>
</div>
</div>
<script>
document.getElementById('amount').value = realAmount;
</script>
</body>
</html>
source https://stackoverflow.com/questions/71341983/mastercard-hosted-checkout-session
Hello, my name is Muhammad Athar. I'm a 17 year old student. I'm a Web Developer, Designer and Freelancer.
No comments:
Post a Comment