Reply
Highlighted
Member
Posts: 6
Registered: ‎07-29-2015

Accept Hosted Payment Form Sample Page Problems

[ Edited ]

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>

 

 

Highlighted
Contributor
Posts: 16
Registered: ‎02-24-2020

Re: Accept Hosted Payment Form Sample Page Problems

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"}),
            }]
          }
        }
      };