cancel
Showing results for 
Search instead for 
Did you mean: 

Hosted gateway payment stalled

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?

PcDudes524
Contributor
14 REPLIES 14

It only seems to happen when I set 'showReceipt' to false.

PcDudes524
Contributor

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>

 

Powered by NexWebSites.com -
Certified Authorize.net developers

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>

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?

window.location = "http://www.yoururl.com";
Powered by NexWebSites.com -
Certified Authorize.net developers

Sorry, I'm horrible with JS. Where would I put this line?

<script type="text/javascript">
    document.getElementById("closeAcceptConfirmationFooterBtn").onclick = function () {
        window.location = "http://www.yoururl.com";
    };
</script>
Powered by NexWebSites.com -
Certified Authorize.net developers

That doesn't seem to work for me, still showing the payment form after I click the button.

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

Powered by NexWebSites.com -
Certified Authorize.net developers