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

Question

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?

I made a similar workaround trying to minimize the delay, using setInterval() with 100ms and destroying the timer once done — pierpy
– pierpy, Commented Mar 8 at 3:45

Ashwin Phadke · Accepted Answer · 2025-03-07 20:52:23Z

1

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???");
    }
  };

answered Mar 7 at 20:52

Ashwin Phadke

3673 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pierpy Mar 8 at 3:43

I think that this cannot work 100% on a reactive system

Ashwin Phadke Mar 10 at 21:55

Well,for that I believe you could create isAvailable or isLoaded or refs like that in a composable with this function that set and monitor from this function and also monitor them in onMounted.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related