I have successfully coded for the getHostedPaymentPageRequest endpoint and successfully generated tokens.
I used the test form provided by Aaron from the forum and it displayed the credit card fields properly utilizing a token generated from the getHostedPaymentPageRequest endpoint within the allotted time referenced above.
<html> <head> <title>Form test page</title> </head> <body> <form method="post" action="https://test.authorize.net/payment/payment">Token: <textarea rows="15" cols="100" name="token" value="" ></textarea> <br><br> <input type="submit" value="Get the payment form" /> </form> </body> </html>
I used the browser development tool to display the following from executing the test code above.
var g_token = "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.5A568ed9pUnZ";
var g_merchantData = {"billTo":{"phoneNumber":"1-218-444-7669","faxNumber":null,"email":null,"firstName":"Steve","lastName":"Fogelson","company":"Up North Sports","address":"345 Bentley Dr SW","city":"Bemidji","state":"MN","zip":"56601","country":"US"},"shipTo":{"firstName":"Steve","lastName":"Fogelson","company":"Up North Sports","address":"345 Bentley Dr SW","city":"Bemidji","state":"MN","zip":"56601","country":"US"},"orderDescription":"Up North Sports Purchase","orderInvoiceNumber":"U2405211716324541","poNumber":null,"email":"fogelst@askics.net","totalAmount":"284.97","currencySymbol":"$","currencyCode":"USD"};
var g_pageOptions = {"hostedPaymentReturnOptions":{"showReceipt":true,"url":"https://www.upnorthsports.com","urlText":"Continue","cancelUrl":"https://www.upnorthsports.com","cancelUrlText":"Cancel"},"hostedPaymentButtonOptions":{"text":"Pay"},"hostedPaymentStyleOptions":{"bgColor":"blue"},"hostedPaymentPaymentOptions":{"cardCodeRequired":true,"showCreditCard":true,"showBankAccount":false},"hostedPaymentSecurityOptions":{"captcha":false},"hostedPaymentShippingAddressOptions":{"show":false,"required":false},"hostedPaymentBillingAddressOptions":{"show":false,"required":false},"hostedPaymentCustomerOptions":{"showEmail":false,"requiredEmail":false,"addPaymentProfile":true},"hostedPaymentOrderOptions":{"show":true,"merchantName":"Up North Sports"},"hostedPaymentIFrameCommunicatorUrl":{"url":"https://www.upnorthsports.com/Admin/IFrameCommunicator.html"}};
var g_paymentProfiles = null;
var g_maxPaymentProfiles = false;
var g_errorPanelMessage = "";
var g_siteKey = "6Lc8tgYAAAAAAFfalsuPuIZ6bv_2dGT_Y9ZxURiK";
var g_visaCheckoutUrl = "https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png";
I then put together a test form based on both the IFrame LightBox and Embedded methods as documented at https://developer.authorize.net/api/reference/features/accept-hosted.html
I pulled the following from https://github.com/AuthorizeNet/accept-sample-app/tree/master/scripts
<script src="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/bootstrap.min.js"></script>
I am receiving the following message - "Missing or invalid token." from both the IFrame LightBox and Embedded methods.
I also used the browser developer tools to display the following from these tests.
var g_token = "null";
var g_merchantData = null;
var g_pageOptions = null;
var g_paymentProfiles = null;
var g_maxPaymentProfiles = false;
var g_errorPanelMessage = "Missing or invalid token.";
var g_siteKey = "6Lc8tgYAAAAAAFfalsuPuIZ6bv_2dGT_Y9ZxURiK";
var g_visaCheckoutUrl = "https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png";
Here is the source code from the IFrame LightBox test I ran.
Please help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/bootstrap.min.js"></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('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> </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="L9HdVE84fEgjsRvIZtixSdrlGqaoSvkA+XTJYLPNkxUY9HmhHzPsbPhSxNUiyrM7U60EQ5IoTkqRNKFgH/BD0dqtWSdrm1cF4dOR..." /> </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:;" 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()); 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>
06-27-2024 09:31 PM
Same issue. No matter how many times I check the code, I always get the "Missing or invalid token." error when passing the token to the iframe source. Even had ChatGPT write a script from scratch to triple check - same outcome.
07-01-2024 05:00 PM
thank you can solve ,my problem
07-02-2024 02:53 AM