I am using the following code to successfully complete an authCaptureTransaction. However the body script function is not able to get any transaction response. The postMessage("running function" message and postMessage("after if" are being hit several times but nothing in the "switch". This is kind of frakencode so hopefully, I am just missing something simple.
<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
// when a message is received from the page code
window.onmessage = (event) => {
if (event.data) {
document.getElementById("TokenForm").innerHTML = event.data;
$("#add_payment").show();
$("#send_token").attr({ "action": "https://test.authorize.net/payment/payment", "target": "add_payment" }).submit();
$(window).scrollTop($('#add_payment').offset().top - 50);
}
};
</script>
</head>
<body>
<div id="iframe_holder" class="center-block" style="width:90%;max-width: 1000px">
<iframe id="add_payment" class="embed-responsive-item panel" name="add_payment" width="100%" height="700" frameborder="0" scrolling="no" hidden="true">
</iframe>
</div>
<div id="TokenForm"></div>
<script type="text/javascript">
(function () {
window.parent.postMessage("running function", "*");
if (!window.AuthorizeNetIFrame) window.AuthorizeNetIFrame = {};
window.parent.postMessage("after if", "*");
AuthorizeNetIFrame.onReceiveCommunication = function (querystr) {
var params = parseQueryString(querystr);
switch (params["action"]) {
case "successfulSave":
window.parent.postMessage("successfulSave", "*");
break;
case "cancel":
window.parent.postMessage("cancel", "*");
break;
case "resizeWindow":
window.parent.postMessage("resizeWindow", "*");
var w = parseInt(params["width"]);
var h = parseInt(params["height"]);
var ifrm = document.getElementById("add_payment");
ifrm.style.width = w.toString() + "px";
ifrm.style.height = h.toString() + "px";
break;
case "transactResponse":
window.parent.postMessage("transactResponse", "*");
var ifrm = document.getElementById("add_payment");
ifrm.style.display = 'none';
}
};
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>
