I've seen many similar posts on the forurm regarding just seeing the never-ending "Loading..." message (originating from https://js.authorize.net/v3/acceptMain/acceptMain.html) on slow network connections. My client experiences this often but I'm only able to recreate it when 1) I throttle the network down to 3G speeds and 2) disable browser caching. I do not see any script errors in the console and all network traffic has completed before I click the payment button. The SCRIPT tag to load AcceptUI.hs appears on the page directly after the "button".
Has anyone found a solution for this problem?
โ05-08-2019 06:10 AM
I found a โband-aidโ:
Authorize.net's modal fails to load on slow networks for the first time.
But it loads fine on the second page load...
Preload the modal, then remove it along with the script, then load the script again, which in turn will load the modal again:
let script; let iframe; const PROVIDER_FILES_TO_LOAD = 2; let providerFilesLoaded = 0; // Should be disabled by default const button = document.querySelectorAll( BUTTON_SELECTOR ); init(); function init() { preloadModal(); createScript(); } function preloadModal() { iframe = document.createElement( 'iframe' ); iframe.src='https://js.authorize.net/v3/acceptMain/acceptMain.html'; iframe.classList.add( 'visuallyHidden' ); // Make it 1x1 or something like that, so user doesn't see it iframe.addEventListener( 'load', enableButton ); document.body.append( iframe ); } function createScript() { script = document.createElement( 'script' ); script.src='https://js.authorize.net/v3/AcceptUI.js'; script.addEventListener( 'load', enableButton ); document.body.append( script ); } function enableButton() { providerFilesLoaded += 1; // Wait for all provider files to load, then remove them, and load again if ( providerFilesLoaded === PROVIDER_FILES_TO_LOAD ) { iframe.remove(); script.remove(); createScript(); } else if ( providerFilesLoaded === PROVIDER_FILES_TO_LOAD + 1 ) { button.disabled = false; } }
โ05-31-2019 09:53 AM