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>
