cancel
Showing results for 
Search instead for 
Did you mean: 

Authorized.net hosted form iframe unable to redirect to parent form

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="authorizedform.aspx.cs" Inherits="training2.Authorizednet.authorizedform" %>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}

#divAuthorizeNetPopupScreen {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1;
background-color: #808080;
opacity: 0.5;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)';
filter: alpha(opacity=50);
}

#divAuthorizeNetPopup {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
z-index: 2;
overflow: visible;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupOuter {
background-color: #dddddd;
border-width: 1px;
border-style: solid;
border-color: #a0a0a0 #909090 #909090 #a0a0a0;
padding: 4px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupTop {
height: 23px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose {
position: absolute;
right: 7px;
top: 7px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a {
background-image: url('content/closeButton1.png');
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: inline-block;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:hover {
background-image: url('content/closeButton1h.png');
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:active {
background-image: url('content/closeButton1a.png');
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupInner {
background-color: #ffffff;
border-width: 2px;
border-style: solid;
border-color: #cfcfcf #ebebeb #ebebeb #cfcfcf;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupBottom {
height: 30px;
}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupLogo {
position: absolute;
right: 9px;
bottom: 4px;
width: 200px;
height: 25px;
background-image: url('content/powered_simple.png');
}

.AuthorizeNetPopupSimpleTheme .AuthorizeNetPopupOuter {
border: 1px solid #585858;
background-color: #ffffff;
}
</style>
<script type="text/javascript">
//<![CDATA[
function callParentFunction(str) {
if (str && str.length > 0
&& window.parent
&& window.parent.parent
&& window.parent.parent.AuthorizeNetPopup
&& window.parent.parent.AuthorizeNetPopup.onReceiveCommunication) {
// Errors indicate a mismatch in domain between the page containing the iframe and this page.
window.parent.parent.AuthorizeNetPopup.onReceiveCommunication(str);
}
}

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>
<!--Auth form-->
<div class="form-horizontal" style="padding-top: 50px;">
Trigger Accept Transaction
<button id="btnOpenAuthorizeNetPopup" onclick="return AuthorizeNetPopup.openPopup()">Open AuthorizeNetPopup</button>
</div>
<div id="divAuthorizeNetPopup" style="display: none;" class="AuthorizeNetPopupGrayFrameTheme">
<div class="AuthorizeNetPopupOuter">
<div class="AuthorizeNetPopupTop">
<div class="AuthorizeNetPopupClose">
<a href="javascript&colon;;" onclick="AuthorizeNetPopup.closePopup();" title="Close"></a>
</div>
</div>
<div class="AuthorizeNetPopupInner">
<iframe name="iframeAuthorizeNet" id="iframeAuthorizeNet" src="../CarBooking/CarBookingForm" frameborder="0" scrolling="no"></iframe>
</div>
<div class="AuthorizeNetPopupBottom">
<div class="AuthorizeNetPopupLogo" title="Powered by Authorize.net"></div>
</div>
<div id="divAuthorizeNetPopupScreen" style="display: none;"></div>
</div>
</div>
<asp:HiddenField ID="token" ClientIDMode="Static" runat="server" Value="" />
<script type="text/javascript">
(function () {
if (!window.AuthorizeNetPopup) window.AuthorizeNetPopup = {};
if (!AuthorizeNetPopup.options) AuthorizeNetPopup.options = {
onPopupClosed: null
};

AuthorizeNetPopup.closePopup = function () {
document.getElementById("divAuthorizeNetPopupScreen").style.display = "none";
document.getElementById("divAuthorizeNetPopup").style.display = "none";
document.getElementById("iframeAuthorizeNet").src="../CarBooking/CarBookingForm";
document.getElementById("btnOpenAuthorizeNetPopup").disabled = false;
if (AuthorizeNetPopup.options.onPopupClosed) AuthorizeNetPopup.options.onPopupClosed();
};


AuthorizeNetPopup.openPopup = function () {
$("#token").prop('name', 'token');
///$('#myModal').modal('show');

setTimeout(function () {
var popup = document.getElementById("divAuthorizeNetPopup");
var popupScreen = document.getElementById("divAuthorizeNetPopupScreen");
var ifrm = document.getElementById("iframeAuthorizeNet");
var form = document.forms["form1"];

form.action = "https://test.authorize.net/payment/payment";
form.target = "iframeAuthorizeNet"
ifrm.style.width = "400px";
ifrm.style.height = "400px";
form.submit();
// $("#form1").attr({ "action": "https://test.authorize.net/payment/payment", "target": "iframeAuthorizeNet" }).submit();
/* $(window).scrollTop($('#add_payment').offset().top - 50);*/
popup.style.display = "";
popupScreen.style.display = "";
centerPopup();
//Add event EventListener

if (window.addEventListener) {
window.addEventListener("message", receiveMessage, false);
} else if (window.attachEvent) {
window.attachEvent("onmessage", receiveMessage);
}
$("#iframe_Id").contents("#button_id").click(functionToRun);
function functionToRun() {
alert("iframe clicked");
}
}, 200);
return false;
};

AuthorizeNetPopup.onReceiveCommunication = function (querystr) {
var params = parseQueryString(querystr);
switch (params["action"]) {
case "successfulSave":
AuthorizeNetPopup.closePopup();
break;
case "cancel":
AuthorizeNetPopup.closePopup();
break;
case "transactResponse":
var response = params["response"];
document.getElementById("token").value = response;
AuthorizeNetPopup.closePopup();
break;
case "resizeWindow":
var w = parseInt(params["width"]);
var h = parseInt(params["height"]);
var ifrm = document.getElementById("iframeAuthorizeNet");
ifrm.style.width = w.toString() + "px";
ifrm.style.height = h.toString() + "px";
centerPopup();
break;
}
};


function centerPopup() {
var d = document.getElementById("divAuthorizeNetPopup");
d.style.left = "50%";
d.style.top = "50%";
var left = -Math.floor(d.clientWidth / 2);
var top = -Math.floor(d.clientHeight / 2);
d.style.marginLeft = left.toString() + "px";
d.style.marginTop = top.toString() + "px";
d.style.zIndex = "2";
if (d.offsetLeft < 16) {
d.style.left = "16px";
d.style.marginLeft = "0px";
}
if (d.offsetTop < 16) {
d.style.top = "16px";
d.style.marginTop = "0px";
}
}

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>
</asp:Content>

 

 

private void GetToken()
{
string ApiId = "23WdzW6F";
string ApiTransactionKey = "8s2SLbk5ur9SN52N";
decimal amount = 20M;
lineItemType[] lineItemTypes = new lineItemType[1];
lineItemType lineItem = new lineItemType()
{
itemId = "1234",
name = "Test",
description = "Test",
quantity = 1,
unitPrice = 20,
taxable = true,
};
lineItemTypes.SetValue(lineItem, 0);
customerAddressType billTo = new customerAddressType()
{
firstName = "Ellen",
lastName = "Johnson",
company = "Souveniropolis",
address = "14 Main Street",
city = "Pecan Springs",
state = "TX",
zip = "44628"
};

var res = AuthorizeNet.AcceptSuite.ExecuteMethod(ApiId,
ApiTransactionKey,
amount, false, false, @"https://localhost:44391/CarBooking/CarBookingForm",
@"https://localhost:44391/", lineItemTypes, billTo);
token.Value = ((AuthorizeNet.Api.Contracts.V1.getHostedPaymentPageResponse)res).token;
}

venubabu12
Member
1 REPLY 1

Using our sandbox authorize.net account, the iframe hosted checkout page shows up. I can fill out the credit card info and submit. I get the receipt, 2 receipt emails from authorize.net and get sent to the confirmation page, but the case "transactResponse" in AuthorizeNetIFrame.onReceiveCommunication never gets triggered. I put a alert in the javascript function to see all the querystrings that come into the iframe.

Other than the coldfusion code to authenticate and get the token (which seems to work) I got the rest of the code from the Authorize.net documentation. Subarunet.com

Any idea why I don't see the action=transactResponse query string come into iframe with the response from the authorize.net credit card transaction.

Rodriguez999
Member