Search code examples
javascriptsap-commerce-cloudauthorize.net

No transaction response when showReceipt is set to false in Accept Hosted approach (Authorize.net)

I'm trying to integrate authorize.net accept hosted page using the iframe approach in SAP Hybris. The iframe is supposed to send back a response when the showReceipt is set to false according to the documentation. But as of now it seems to be stuck after pay button is clicked.

I have been trying the approach in the documentation. Then tried out the solution in How to implement Authorize.NET Hosted Payments iFrame & Laravel .

This is the hostedOrderPage which is where the iframe displays:

<script type="text/javascript">

$(document).ready(function(){

    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) {

        console.log('communication handler enter');

        var params = parseQueryString(argument.qstr)

        switch(params['action']){

            case "cancel"           :

                console.log('cancel'); break;

            case "transactResponse" :

                console.log("transaction response received");
                console.log(transResponse.totalAmount);

        }
    }

    //send the token
    $('#send_hptoken').submit();


});

</script>

<div id="item_container_holder">

    <div class="item_container">
    <div id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px" data-mediator="payment-form-loader">
        <iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="750" height="900" frameborder="0" scrolling="no">
            </iframe>
                <form:form id="send_hptoken" action="https://test.authorize.net/payment/payment" method="post" target="load_payment">
        <input type="hidden" name="token" value="${token}" />
            </form:form>

    </div>
    </div>
</div>

This is the iframecommunicator:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IFrame Communicator</title>
    <script type="text/javascript">

    function callParentFunction(str) {

        if (str && str.length > 0 && window.parent.parent
            && window.parent.parent.CommunicationHandler && window.parent.parent.CommunicationHandler.onReceiveCommunication) {

            var referrer = document.referrer;
            window.parent.parent.CommunicationHandler.onReceiveCommunication({qstr : str , parent : referrer});

        }

    }

    function receiveMessage(event) {

        if (event && event.data) {
            callParentFunction(event.data);
        }

    }

    if (window.addEventListener) {

        window.addEventListener("message", receiveMessage, false);

    } else if (window.attachEvent) {

        window.attachEvent("onmessage", receiveMessage);

    }

    if (window.location.hash && window.location.hash.length > 1) {

        callParentFunction(window.location.hash.substring(1));

    }

</script>
</head>
<body></body>
</html>

It seems nothing is logged into the console. If there is a response coming it should enter the switch case 'transactResponse' in the hostedOrderPage and log it to the console.

Solution

  • I had a similar problem. Make sure Test Mode is off on the Sandbox account first. Also I believe I had to add Content-Security-Policy for all the related domains plus frame-ancestors 'self' to the Header of the form. I build a string for the local domain and the remote domain, in my case it was test.authorize.net, and add that as a attribute. I build the forms dynamically.

    Code Snip

    See this link at the Dev forms for more information about the CSC issue.