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>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<head>
<title>HostedPayment Test Page</title>
</head>
<body>
<h1>Hosted Payment Form Demo</h1>
<p>Here goes the iframe:</p>
<p>-----------------------------------------------------------------------</p>
<iframe id="load_payment" class="embed-responsive-item" name="load_payment" width="750" height="900" scrolling="no">
</iframe>
<form id="send_token" action="https://test.authorize.net/payment/payment" method="post" target="load_payment" >
<input type="hidden" name="token" value="{{token}}" />
<input type="submit" value="Submit">
</form>
<p>-----------------------------------------------------------------------</p>
<p>Response:</p>
<p id="state"></p>
<p id="result"></p>
<script type="text/javascript">
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>
