[SOLVED] How to wait for an external script to be ready in Vue 3?

How to wait for an external script to be ready in Vue 3?

I am trying to integrate Google Pay as a component in an application. I need to load the Google Pay Javascript file before I perform any actions. This is what I am doing:

onMounted(()=>{
  const scripts = [
    "https://pay.google.com/gp/p/js/pay.js",
  ];

  // Append the pay.js script to the <head> tag
  scripts.forEach(script => {
    let tag = document.createElement("script");
    tag.setAttribute("src", script);
    tag.setAttribute("async", true);
    
    document.head.appendChild(tag);
  });

  //Check if Google Pay exists
  function isGooglePayReady(){
    if('google' in window && Object.keys(window.google).length) {
      loadGooglePay()
    }
}

// Have to currently use a setTimeout to wait for script to load
setTimeout(()=> isGooglePayReady(), 500);

I set the timeout to 500 arbitrarily because I don't know how long it at takes for the https://pay.google.com/gp/p/js/pay.js script to load be available.

Is there a better way to wait for the script to load and be ready than using a setTimeout() function?

Solution

Using the scripts onload and onerror events is most likely an option here I suppose.

  
  // Set up the onload handler before appending to DOM
  tag.onload = () => {
  //Check if Google Pay exists
  if ('google' in window && window.google.payments && window.google.payments.api) {
      loadGooglePay();
    } else {
      console.error("Where response???");
    }
  };