Lazy load of cdn
mbret opened this issue · 2 comments
mbret commented
I could not find a way to lazy load the checkout library, did I miss something or it's not supported yet ? Alternatively could we have a way to listen for a onScriptReady callback ? This way we could at least put the script load in the body rather than the head
kenso312 commented
Here I use a bit hacky way to achieve this
const [isLibLoaded, setIsLibLoaded] = useState(false);
useEffect(() => {
const scriptSrc = 'https://cdn.checkout.com/js/framesv2.min.js';
const existingScriptTag = document.querySelector(
`script[src='${scriptSrc}']`
);
if (existingScriptTag) document.head.removeChild(existingScriptTag);
const scriptTag = document.createElement('script');
scriptTag.src = scriptSrc;
scriptTag.addEventListener('load', () => setIsLibLoaded(true));
document.head.appendChild(scriptTag);
}, []);
...
{isLibLoaded && (
<Frames>
)}
mbret commented
Yeah that was my fallback solution as well. Thank you for the code sample tho