cancel
Showing results forย 
Search instead forย 
Did you mean:ย 

"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?

JonnyRoller
Member
1 REPLY 1

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

 

 

authorizeme
Member