No response for 'transactResponse' action, but I got response for 'Cancel' and 'resizeWindow' action

nch — Fri, 22 Mar 2024 17:00:31 GMT

Hi All,

I'm integrating Authorize.Net Accept-Hosted in a flask application over Linux Ubuntu. The test web page is shown at the end of this post. It is straightforward, I just followed instructions on https://github.com/AuthorizeNet/accept-sample-app/blob/master/README-AcceptHosted.md for an embedded iframe.

The page is able to show the embedded payment-form and it receives messages for actions "Cancel" and "resizeWindow", but no message is received for "transactResponse" action after pressing the pay button (I receive the email of the transaction). I'm testing it on Chrome Version 122.0.6261.129 and Microsoft Edge Version 122.0.2365.92

The IFrame Communicator page is exactly as in https://github.com/AuthorizeNet/accept-sample-app/blob/master/IFrameCommunicator.html and it is hosted in the static folder of flask, so it is accessible in the same domain of the payment page. Its URL is included in the token.

This is what I got in the console for the actions:

When the form loads I receive the message "Failed to execute 'postMessage' on 'DOMWindow'... I think that message is because the iFrame didn't finish loading yet. Not sure if it could be part of the issue since the Content Security Policy on the Apache server is set up as following: Header set Content-Security-Policy "frame-ancestors 'self' \*.authorize.net"

I expected to receive a message for "transactResponse" as in cases "Cancel" and "resizeWindow". Some body would have an idea of what is missing, what is wrong? I would appreciate any help.

This is the page code:

<!doctype html>

<html>

<head>

<title>HostedPayment Test Page</title>

</head>

<body>

<h1>Hosted Payment Form Demo</h1>

<p>Here goes the iframe:</p>

</iframe>

</form>

<p>Response:</p>

window.CommunicationHandler = {};

CommunicationHandler.onReceiveCommunication = function (argument) {

console.log(argument);

var params = parseQueryString(argument.qstr);

switch (params["action"]) {

case "successfulSave":

document.getElementById("state").innerHTML = "Save";

break;

case "cancel":

document.getElementById("state").innerHTML = "Cancel";

break;

case "resizeWindow":

document.getElementById("state").innerHTML = "resizeWindow";

break;

case "transactResponse":

document.getElementById("state").innerHTML = "Getting the response";

var transResponse = JSON.parse(params['response']);

console.log(transResponse);

document.getElementById("result").innerHTML = transResponse.transId;

}

};

function parseQueryString(str) {

var vars = [];

var arr = str.split('&');

var pair;

for (var i = 0; i < arr.length; i++) {

pair = arr[i].split('=');

vars.push(pair[0]);

vars[pair[0]] = unescape(pair[1]);

}

return vars;

}

</script>

</body>

</html>

topic No response for 'transactResponse' action, but I got response for 'Cancel' and 'resizeWindow' action in Integration and Testing

No response for 'transactResponse' action, but I got response for 'Cancel' and 'resizeWindow' action