I am dynamically loading Accept.js only if it's needed during our checkout process. My initial approach was to just add the script to the <head> tag, listen for the script's load event, and then call Accept.dispatchData. Unfortunately, this results in E_WC_03: Accept.js is not loaded correctly.
Relevant code:
async function loadScript(source, charset) {
let script = document.createElement('script');
script.setAttribute('src', source);
if (charset) {
script.setAttribute('charset', charset);
}
let onLoad = null;
let onError = null;
try {
return await new Promise((resolve, reject) => {
onLoad = e => resolve(e);
onError = e => reject(e);
script.addEventListener('load', onLoad);
script.addEventListener('error', onError);
document.head.appendChild(script);
});
} finally {
if (onLoad) {
script.removeEventListener('load', onLoad);
}
if (onError) {
script.removeEventListener('error', onError);
}
}
}
async loadAcceptApi() {
if (typeof Accept != 'undefined') {
return;
}
await loadScript('https://jstest.authorize.net/v1/Accept.js');
}
async getPaymentNonce(paymentDetails) {
await loadAcceptApi();
return await new Promise((resolve, reject) => {
Accept.dispatchData(paymentDetails, response => {
// ...
});
}
}
Digging into the source for Accept.js, I think I see why this results in an error:
- Our script loads the Accept.js script
- Accept.js loads AcceptCore.js
- Until AcceptCore.js is loaded, Accept.dispatchData is defined to just warn "Accept.js is not loaded correctly"
- Loading Accept.js does not block or wait for AcceptCore.js to load
- Since our script resumes execution immediately after loading the Accept.js script, there is a race condition where our call to Acccept.dispatchData can occur before AcceptCore.js is fully loaded, resulting in the warning
I dug into AcceptCore.js and found a workaround. AcceptCore.js appears to emit a handshake event on the body element when it is loaded. Knowing this, I updated our code to wait for Accept.js to load and for the handshake event to fire before calling Accept.dispatchData.
Updated relevant code:
async loadAcceptApi() {
if (typeof Accept != 'undefined') {
return;
}
let onHandshake = null;
try {
// Accept.js loads AcceptCore.js, so we have to wait for the
// "handshake" event that AcceptCore.js emits after loading.
let handshake = new Promise(resolve => {
onHandshake = () => resolve();
document.body.addEventListener('handshake', onHandshake);
});
// Wait for script load and handshake.
await Promise.all([loadScript('https://jstest.authorize.net/v1/Accept.js', 'utf-8'), handshake]);
} finally {
if (onHandshake) {
document.body.removeEventListener('handshake', onHandshake);
}
}
}
With the updated code, everything works as expected. We load Accept.js dynamically, wait for it to load, wait for AcceptCore.js to load via the handshake event and only then make our call through Accept.dispatchData.
Questions:
- I don't see AcceptCore.js's handshake event documented anywhere, so should we be relying on this internal implementation detail? The obvious answer is no, but then...
- If not listening for handshake, how else are we supposed to know that Accept has fully loaded? Since Accept.js does a non-blocking load of AcceptCore.js, I'm not sure what alternative we have. Sleeping for a small amount of time also works, but that's an even worse workaround.
Regards,
Chris
