When I click the 'Pay' button in my hosted gateway the words change to 'Processing' and nothing happens. How can I determine what is happening?
09-19-2017 08:52 AM
It only seems to happen when I set 'showReceipt' to false.
09-19-2017 12:03 PM
Hi,
This is because when showReceipt is set to false, you need to handle the response, by showing your own receipt or thank you page. Elements of the transaction response are sent to your parent page via your hostedPaymentIFrameCommunicatorUrl, including transId. In your parent page, you can react to the transaction response with something like the following, which will vary depending on your desired results and your ID selectors :
<script> window.CommunicationHandler = {}; function parseQueryString(str) { var vars = []; var arr = str.split('&'); var pair; for (var i = 0; i < arr.length; i++) { pair = arr[i].split('='); vars[pair[0]] = unescape(pair[1]); } return vars; } window.CommunicationHandler.onReceiveCommunication = function (argument) { params = parseQueryString(argument.qstr) parentFrame = argument.parent.split('/')[4]; switch (params['action']) { case "transactResponse": var transResponse = JSON.parse(params['response']); $('#demo').html("Thank you. Your Transaction Id is: "+transResponse.transId); // $('#payframe').hide(); $('#form1').hide(); $('#form2').show(); $('input[name="transid"]').val(transResponse.transId); if (transResponse.transId > 0) { // $('#payframe').hide(); $('#cardnumbers').hide(); $('#payframe').attr('src', ""); $('html,body').scrollTop(0); } } } </script>
09-20-2017 07:31 AM
I am using the one directly from Github:
<script type="text/javascript">
window.CommunicationHandler = {};
function parseQueryString(str) {
var vars = [];
var arr = str.split('&');
var pair;
for (var i = 0; i < arr.length; i++) {
pair = arr[i].split('=');
vars[pair[0]] = unescape(pair[1]);
}
return vars;
}
CommunicationHandler.onReceiveCommunication = function (argument) {
params = parseQueryString(argument.qstr)
parentFrame = argument.parent.split('/')[4];
console.log(params);
console.log(parentFrame);
//alert(params['height']);
$frame = null;
switch(parentFrame){
case "manage" : $frame = $("#load_profile");break;
case "addPayment" : $frame = $("#add_payment");break;
case "addShipping" : $frame = $("#add_shipping");break;
case "editPayment" : $frame = $("#edit_payment");break;
case "editShipping" : $frame = $("#edit_shipping");break;
case "payment" : $frame = $("#load_payment");break;
}
switch(params['action']){
case "resizeWindow" : if( parentFrame== "manage" && parseInt(params['height'])<1150) params['height']=1150;
if( parentFrame== "payment" && parseInt(params['height'])<1000) params['height']=1000;
if(parentFrame=="addShipping" && $(window).width() > 1021) params['height']= 350;
$frame.outerHeight(parseInt(params['height']));
break;
case "successfulSave" : $('#myModal').modal('hide'); location.reload(false); break;
case "cancel" :
var currTime = sessionStorage.getItem("lastTokenTime");
if (currTime === null || (Date.now()-currTime)/60000 > 15){
location.reload(true);
onLoad = true;
}
switch(parentFrame){
case "addPayment" : $("#send_token").attr({"action":baseUrl+"addPayment","target":"add_payment"}).submit(); $("#add_payment").hide(); break;
case "addShipping" : $("#send_token").attr({"action":baseUrl+"addShipping","target":"add_shipping"}).submit(); $("#add_shipping").hide(); $('#myModal').modal('toggle'); break;
case "manage" : $("#send_token").attr({"action":baseUrl+"manage","target":"load_profile" }).submit(); break;
case "editPayment" : $("#payment").show(); $("#addPayDiv").show(); break;
case "editShipping" : $('#myModal').modal('toggle'); $("#shipping").show(); $("#addShipDiv").show(); break;
case "payment" : sessionStorage.removeItem("HPTokenTime"); $('#HostedPayment').attr('src','about:blank'); break;
}
break;
case "transactResponse" : sessionStorage.removeItem("HPTokenTime");
$('#HostedPayment').attr('src','about:blank');
var transResponse = JSON.parse(params['response']);
$("#HPConfirmation p").html("<strong><b> Success.. !! </b></strong> <br><br> Your payment of <b>$"+transResponse.totalAmount+"</b> for <b>"+transResponse.orderDescription+"</b> has been Processed Successfully on <b>"+transResponse.dateTime+"</b>.<br><br>Generated Order Invoice Number is : <b>"+transResponse.orderInvoiceNumber+"</b><br><br> Happy Shopping with us ..");
$("#HPConfirmation p b").css({"font-size":"22px", "color":"green"});
$("#HPConfirmation").modal("toggle");
}
}
</script>
09-20-2017 08:38 AM
Ok, I found the error but now I need it to go to another page once they have clicked the close button in the alert window. How do I do this?
09-20-2017 08:52 AM
09-20-2017 08:58 AM - edited 09-20-2017 08:59 AM
Sorry, I'm horrible with JS. Where would I put this line?
09-20-2017 09:02 AM
<script type="text/javascript"> document.getElementById("closeAcceptConfirmationFooterBtn").onclick = function () { window.location = "http://www.yoururl.com"; }; </script>
09-20-2017 10:32 AM
That doesn't seem to work for me, still showing the payment form after I click the button.
09-20-2017 10:45 AM
Right click and Inspect the close button. What is the id? If it doesn't have one, give it one with id="closeAcceptConfirmationFooterBtn", else replace the "closeAcceptConfirmationFooterBtn" in the following, with the actual id. document.getElementById("closeAcceptConfirmationFooterBtn").onclick
09-20-2017 10:50 AM - edited 09-20-2017 10:57 AM