"Loading..." message using AcceptUI.js on slow network

JonnyRoller — Wed, 08 May 2019 13:10:47 GMT

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?

Re: "Loading..." message using AcceptUI.js on slow network

authorizeme — Fri, 31 May 2019 16:53:14 GMT

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

topic "Loading..." message using AcceptUI.js on slow network in Integration and Testing

"Loading..." message using AcceptUI.js on slow network

Re: "Loading..." message using AcceptUI.js on slow network