We have been using for a while the Accept Hosted payment solution using the iFrame and we have a peculiar issue.
The payment form shows fine on the iFrame only the first time, if you click the "Continue" button and start over the cart process, go back to previous pages and get back to the form that shows the iFrame, the second time we reach the iFrame, we get the message "Missing or invalid token." instead of the Hosted form input fields.
The same behavior occurs if we click on the "Cancel" button and start over the cart.
If we wait 5-6 minutes after the first reach, the second time we get back to it, it works, there is no error.
On top of that, this issue occurs on the browsers: Chrome, Edge, Opera but for some reason not on Firefox.
The error is misleading, before firing the iFrame, the e-commerce module calls the function "getHostedPaymentPageRequest" and it retrieves every single time the token that is passed to the form that launches the iframe (we see this in the logs).
Below is the response content for the GET call to the pages:
"https://accept.authorize.net/payment/payment" (live)
"https://test.authorize.net/payment/payment" (test)
This call is initiated inside of the Accept Hosted form.
It seems that the token sent to the form that hosts the iFrame is ignored.
This behavior occurs in both environments: live and test.
Has anybody seen something like this?
<!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" xml:lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<head id="Head1"><title>
Secure Information
</title>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-KFWQGNC');</script>
<!-- End Google Tag Manager -->
<script src="https://assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js" type="text/javascript" > </script>
<script type="text/javascript">
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://secure.checkout.visa.com/wallet-services-web/xo/button.png";
</script>
<script type="text/javascript">
var g_EcheckEnabled = false;
var g_CreditEnabled = false;
</script>
<base href="./Scripts/v1/">
</head>
<body>
<div class="PageOuter" id="divPageOuter">
<div id="divPopupScreen" class="PopupScreen" style="display:none;"></div>
<div class="Page" id="divPage">
<div class="PageMain container" id="divPageMain container">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KFWQGNC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<app-accept-payment></app-accept-payment>
<link href="styles.bundle.css" rel="stylesheet"/>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</div>
<div class="PageMainAfter"></div>
</div>
</div>
</body>
</html>
Solved! Go to Solution.
โ02-03-2022 10:54 AM
I found the fix for this issue.
The iFrame declaration line cannot contain the source tag.
Example here:
<form id="AuthNet" name="AuthNet" action="https://accept.authorize.net/payment/payment" method="post" target="AuthNet_iframe">
OK
<iframe style="border:0;width:700px;height:2000px" name="AuthNet_iframe" id="AuthNet_iframe" ></iframe>
KO
<iframe style="border:0;width:700px;height:2000px" name="AuthNet_iframe" id="AuthNet_iframe" src="https://accept.authorize.net/payment/payment"></iframe>
โ02-04-2022 08:53 AM
update the readme, should be in the guide but not exactly obvious. We'll also update the readme with better steps to get the sample running.
โ02-03-2022 09:52 PM
The code to open the popup iframe, copied verbatim from the Authorize.net code sample had this bit of code $("#popupToken").val($("#inputtoken").val()); - this is erasing/deleting the token value before it was being submitted to payment gateway - what the heck?! Why would their own example code do that? Commenting this out fixed it.
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()); // WTH authorize???? 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(); };
โ02-03-2022 09:56 PM
I found the fix for this issue.
The iFrame declaration line cannot contain the source tag.
Example here:
<form id="AuthNet" name="AuthNet" action="https://accept.authorize.net/payment/payment" method="post" target="AuthNet_iframe">
OK
<iframe style="border:0;width:700px;height:2000px" name="AuthNet_iframe" id="AuthNet_iframe" ></iframe>
KO
<iframe style="border:0;width:700px;height:2000px" name="AuthNet_iframe" id="AuthNet_iframe" src="https://accept.authorize.net/payment/payment"></iframe>
โ02-04-2022 08:53 AM