Cybersource Developer Community Cybersource Developer Community

worldmodern · ‎03-25-2020

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>

<title>HostedPayment Test Page</title>

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-repeat: no-repeat;

height: 16px;

width: 16px;

display: inline-block;

}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:hover {

}

.AuthorizeNetPopupGrayFrameTheme .AuthorizeNetPopupClose a:active {

}

.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;

}

.AuthorizeNetPopupSimpleTheme .AuthorizeNetPopupOuter {

border: 1px solid #585858;

background-color: #ffffff;

}

</style>

</head>

<body>

</form>

<br />

<div>

Trigger Accept Transaction

<button id="btnOpenAuthorizeNetPopup" onclick="AuthorizeNetPopup.openPopup()">Open AuthorizeNetPopup</button>

</div>

</div>

</div>

</div>

</div>

(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());

form.action = "https://test.authorize.net/payment/payment";

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>

natesutherland2 · ‎03-26-2020

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 &.

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

samin00 · ‎07-23-2021

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

marine2026 · ‎08-14-2023

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

Cybersource Developer Community Cybersource Developer Community

Accept Hosted Payment Form Sample Page Problems

li.media.uploader-dialog.title