How you run the above pages?
Let’s use the localhost server, use localStorage.setItem
to save, and use localStorage.getItem
to get it in the same domain.
Solution 1 :
Problem :
I am trying to implement a payment integration on my web; now after going with the sample code i was able to develop the first phase which is the payment collection and processing.
Now my issue here is how do i display the payment detail on another page when it is successful as it redirects there
<div class="row">
<div class="col-75">
<div class="container">
<form method="POST" id="payment-form">
<div class="row">
<div class="col-50-left">
<h3>Billing Information</h3>
<label for="fname"><i class="fa fa-user"></i> First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="First Name" required="">
<label for="fname"><i class="fa fa-user"></i> Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Last Name">
<label for="adr"><i class="fa fa-money"></i> Amount</label>
<input type="number" id="amount" name="amount" placeholder="NGN 20000">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" name="city" placeholder="Benin City">
</div>
<div class="col-50">
<div class="icon-container">
<img src="assets/images/remita-payment-options.png" style="width: 100%;">
</div>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="email" id="email" name="email" placeholder="[email protected]">
<label for="adr"><i class="fa fa-phone"></i> Phone</label>
<input type="text" id="phone" name="phone" placeholder="+234 XXX XXX XXXX">
<label for="city"><i class="fa fa-comment"></i> Narration</label>
<input type="text" id="narration" name="narration" placeholder="Donation">
</div>
</div>
<button type="button" class="btn" onclick="makePayment();"> Pay </button>
</form>
</div></div></div>
<script>
var date = new Date();
var timestamp = date.getTime();
var form = document.querySelector("#payment-form");
function makePayment() {
var paymentEngine = RmPaymentEngine.init({
key: 'RzAwMDAyMjg5NTl8NDMwNjUxNDd8ZmM4MDg5Yjc3M2Y5ZTk0YWViMDJkMmRmMDVhYmI2MjAwMWVhYjNjY2I5NmU0ZWU3MzBiNTMwYzNlOGEzYTYyMTc2ODM1NzBkYmI4MmI3MTE1ZmUxMzkxYTg0MzZhYjM0ODlkY2U0NzZiMTE4OWU0YTNjMjA1MGJjY2UyNzNkN2I=',
customerId: form.querySelector("#email").value,
firstName: form.querySelector("#firstname").value,
lastName: form.querySelector("#lastname").value,
email: form.querySelector("#email").value,
amount: form.querySelector("#amount").value,
transactionId: timestamp,
narration: form.querySelector("#narration").value,
phone: form.querySelector("#phone").value,
city: form.querySelector("#city").value,
onSuccess: function (response) {
console.log('callback Successful Response', response);
console.log('Amount', response.amount);
console.log('TransactionId: ', response.transactionId);
console.log('RRR: ', response.paymentReference);
/*How do i display these data on the save_live.html page
RRR:
TransactionId:
Amount:
when it redirects there*/
window.localStorage.setItem("globaly", JSON.stringify(response));
window.location.href = 'save_live.html';
},
onError: function (response) {
console.log('callback Error Response', response);
},
onClose: function () {
form.reset();
console.log("closed");
}
});
paymentEngine.showPaymentWidget();
}
</script>
<script type="text/javascript" src="https://remitademo.net/payment/v1/remita-pay-inline.bundle.js"></script>
This is the save_live.html page script below and what i have tried doing
<div class="row">
<div class="col-75">
<div class="container" id="paid">
</div></div></div>
<script>
$(document).ready(function(){
$.getJSON("index.html", function(data){
var payment_data = '';
$.each(data, function(key, value){
payment_data += '<div>';
payment_data += '<p>'+value.paymentReference+'</p>';
payment_data += '<p>'+value.amount+'</p>';
payment_data += '<p>'+value.transactionId+'</p>';
payment_data += '</div>';
})
$('#paid').append(payment_data);
});
});
</script>
Comments
Comment posted by Cyber Ofure
@Nghia Nguyen i have tried that and i get this [Object object] displayed as response