Lazy load of cdn

[Maxime]

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

[Ken So]

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

[Maxime]

Yeah that was my fallback solution as well. Thank you for the code sample tho