cancel
Showing results for 
Search instead for 
Did you mean: 

Accept Hosted Payment Form Sample Page Problems

I am trying to get accept hosted payments to work but getting stuck.  I tried many things always getting the same result. 

 

To narrow it down I went all the way back to the sample code page almost exactly as it exists in the doc and using the token I got from the API test page using the default XML for the token request but with my sandbox credentials. 

 

When I press the button to request the form I just get a popup that says "Missing or Invalid Token."  This is the same result I got every time when I tried to integrate the code into our app.

 

I also get these two js errors in the iframe:

ERROR TypeError: Cannot read property 'billTo' of null

ERROR TypeError: Cannot read property 'offsetHeight' of null

 

Can anyone help?

 

Here is my page HTML

-------------------------------------

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<script src="/assets/jquery3.js"></script>
<script src="/assets/bootstrap"></script>
<title>HostedPayment Test Page</title>
<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('/assets/help.png');
background-repeat: no-repeat;
height: 16px;
width: 16px;
display: inline-block;
}

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

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:active {
background-image: url('/assets/help.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('/assets/authorize.net.png');
}

.AuthorizeNetPopupSimpleTheme .AuthorizeNetPopupOuter {
border: 1px solid #585858;
background-color: #ffffff;
}
</style>
</head>

<body>
<form method="post" action="https://test.authorize.net/payment/payment" id="formAuthorizeNetPopup" name="formAuthorizeNetPopup" target="iframeAuthorizeNet" style="display:none;">
<input type="hidden" id="popupToken" name="token" value="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.383LWJhfV" />
</form>
<input type="text" id="inputtoken" value="" />
<br />
<div>
Trigger Accept Transaction
<button id="btnOpenAuthorizeNetPopup" onclick="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="empty.html" 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>

<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 = "empty.html";
document.getElementById("btnOpenAuthorizeNetPopup").disabled = false;
if (AuthorizeNetPopup.options.onPopupClosed) AuthorizeNetPopup.options.onPopupClosed();
};


AuthorizeNetPopup.openPopup = function () {
var popup = document.getElementById("divAuthorizeNetPopup");
var popupScreen = document.getElementById("divAuthorizeNetPopupScreen");
var ifrm = document.getElementById("iframeAuthorizeNet");
var form = document.forms["formAuthorizeNetPopup"];
$("#popupToken").val($("#inputtoken").val());
ifrm.style.width = "442px";
ifrm.style.height = "578px";

form.submit();

popup.style.display = "";
popupScreen.style.display = "";
centerPopup();
};

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>
</body>
</html>

 

 

worldmodern
Member
3 REPLIES 3

I got the same thing over and over as well, until I cleaned up my "

getHostedPaymentPageRequest" call. One thing that was tripping ours was our company name and the "&" symbol in it.
 
Apparently you can not use "&" ANYWHERE in the request.  Not even &amp;.
 
Seriously. In 2020. 
 
Here's what I use (it works), mind my variables, and note I'm using JSON.stringify instead of escaping quotes.
 
const body = {
        getHostedPaymentPageRequest: {
            merchantAuthentication: {
                name: ANET_LOGIN_ID,
                transactionKey: ANET_TRX_KEY
            },
          transactionRequest: {
            transactionType: "authCaptureTransaction",  // authOnlyTransaction
            amount: parseFloat(amountDue),
            profile: {
              customerProfileId: customerProfileId,
            },
            order: {
                invoiceNumber: invoiceNum,
                description : 'Plumbing Service'
            },
            customer: {
                id   : merchantCustomerId,
                email: customer.eMail,
            },
            billTo : {
                firstName : customer.FirstName,
                lastName  : customer.LastName,
                company   : customer.NameType === 'Company'? customer.OriginalName : null,
                address   : customer.BillAddress,
                city      : customer.BillCity,
                state     : customer.BillState,
                zip       : customer.BillZip,
                country   : customer.BillCountry === 'US'? 'USA' : customer.BillCountry,
                phoneNumber : customer.Phone,
            },
          },
          hostedPaymentSettings: {
            setting: [{
              "settingName": "hostedPaymentReturnOptions",
              "settingValue": JSON.stringify({
                  showReceipt   : true,
                  url           : orig_url,
                  urlText       : 'Continue',
                  cancelUrl     : orig_url,
                  cancelUrlText : "Cancel"
                }),
            }, {
              "settingName": "hostedPaymentButtonOptions",
              "settingValue": '{"text": "Submit Payment"}'
            }, {
              "settingName": "hostedPaymentStyleOptions",
              "settingValue": '{"bgColor": "blue"}'
            }, {
                "settingName": "hostedPaymentPaymentOptions",
                "settingValue": JSON.stringify({
                    cardCodeRequired    : false,
                    showCreditCard      : true, 
                    showBankAccount     : true,
                }),
            }, {
              "settingName": "hostedPaymentSecurityOptions",
              "settingValue": '{"captcha": false}'
            }, {
              "settingName": "hostedPaymentShippingAddressOptions",
              "settingValue": '{"show": false, "required": false}'
            }, {
              "settingName": "hostedPaymentBillingAddressOptions",
              "settingValue": '{"show": true, "required": false}'
            }, {
              "settingName": "hostedPaymentCustomerOptions",
              "settingValue": '{"showEmail": true, "requiredEmail": false, "addPaymentProfile": true}'
            }, {
              "settingName": "hostedPaymentOrderOptions",
              "settingValue": JSON.stringify({
                  show          : true,
                  merchantName  : "Our company name"}),
            }]
          }
        }
      };
natesutherland2
Contributor

Dear Team,
We are currently using Active JS where we get CC info on our website, which is encrypted and sent via API to Authorize.net (AN).
We are switching to Actvive Hosted so that customer can be directed to AN to feed the CC details. in the Active Hosted Document of AN (link below), which is a 5 pointer document - it does not give following details:

 

1. I can't see what values how to post the form redirection
2. What is the url to post
3. What are the mandatory values to posted

https://developer.authorize.net/api/reference/features/accept_hosted.html

Reply from any of you will be of great help.

My email samin@blueskytelecom.com

samin00
Member

 Nate, I was getting the same error as you until I sent the "IFrameCommunicator.html" path in the initial token request.

https://github.com/AuthorizeNet/accept-sample-app/blob/master/IFrameCommunicator.html