I have the getHostedPaymentPageRequest working, with the exception of receiving and processing the response in the container form.
The container page below shows the "switch" on params when action is "transactResponse". This case does not execute as I expected.
I have confirmed that the iFrame Communicator is loaded, and is enabled for cross iframe communication.
My next step is to attempt to trace the onClick button event through the javascript to see where anything is failing, but that process is so tedious I was hoping someone had solved this and could recommend a quicker solution.
FYI, in the javascript below a reference is made to $4d. Please don't let this concern you as it is a development environment feature that allows me to bring the response back to the application that is displaying the web form.
<!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://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
$("#btnOpenAuthorizeNetIFrame").click(function () {
$("#add_payment").show();
$("#send_token").attr({ "action": "https://test.authorize.net/payment/payment", "target": "add_payment" }).submit();
$(window).scrollTop($('#add_payment').offset().top - 250);
});
});
</script>
</head>
<body>
<div>
Open Authorize.net in an iframe to complete transaction
<button id="btnOpenAuthorizeNetIFrame" onclick="">Show Payment Form</button>
</div>
<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%" frameborder="0" scrolling="no" hidden="true">
</iframe>
</div>
<form id="send_token" action="https://test.authorize.net/payment/payment" method="post" target="add_payment" >
<input type="hidden" name="token" value=":-)" />
</form>
<script type="text/javascript">
(function () {
if (!window.AuthorizeNetIFrame) window.AuthorizeNetIFrame = {};
AuthorizeNetIFrame.onReceiveCommunication = function (querystr) {
var params = parseQueryString(querystr);
switch (params["action"]) {
case "successfulSave":
break;
case "cancel":
break;
case "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":
var ifrm = document.getElementById("add_payment");
ifrm.style.display = 'none';
if($4d) {$4d.AN_GH_Response(params["response"]);}
else { var response = params["response"]; alert(response)}
}
};
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>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IFrame Communicator</title>
<!--
To securely communicate between our Accept Hosted form and your web page,
we need a communicator page which will be hosted on your site alongside
your checkout/payment page. You can provide the URL of the communicator
page in your token request, which will allow Authorize.Net to embed the
communicator page in the payment form, and send JavaScript messaging through
your communicator page to a listener script on your main page.
This page contains a JavaScript that listens for events from the payment
form and passes them to an event listener in the main page.
-->
<script type="text/javascript">
function callParentFunction(str) {
if (str && str.length > 0 && window.parent && 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>
The above html is the iFrame Communicator form.
