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 = [
".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 .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 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/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/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?
1 Answer
Reset to default 1Using 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???");
}
};
setInterval()with 100ms and destroying the timer once done – pierpy Commented Mar 8 at 3:45