Reply
Member
Posts: 1
Registered: ‎06-22-2012

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

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?

Highlighted
Member
Posts: 2
Registered: ‎05-30-2019

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

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