0
198
VistasHow to check if stripe.js has finished executing?
Trying to improve my score on Lighthouse and the general performance of a site. The official docs about including stripe.js mention (emphasis mine):
To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Stripe to detect suspicious behavior that may be indicative of fraud as customers browse your website.
Which is understandable but means that, without async/defer, the script slows down the page slightly (by ~190 ms in my tests) on a majority of pages that barely use it.
And:
You can also load Stripe.js using the
asyncordeferattribute on the script tag. Note, however, that with asynchronous loading any API calls will have to be made only after the script execution has finished.
This leaves me with the following questions:
- How can I check whether stripe.js has finished executing?
asyncordefer? i.e. is stripe.js completely independent (async), or does it depend on the DOM being fully built (defer)?- Rather than check if stripe.js has finished executing, maybe I should just move my own, inline, Stripe code (for a checkout page) into its own dedicated JS file, loaded as defer. This way things would load in a non-blocking way, and would still execute in their relative order.
3 Respuestas
Responde la pregunta0
If using an npm module isn't your case for asynchronous loading, you can check for the Stripe function before initializing Stripe.js. Something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script defer src="https://js.stripe.com/v3/"></script>
</head>
<body>
<script type="text/javascript">
try {
console.log("The first attempt to access Stripe: " + Stripe.version);
} catch (e) {
console.log("Stripe is not ready.");
}
stripeScriptElement = document.querySelector("script[src^='https://js.stripe.com/v3']");
if (stripeScriptElement) {
stripeScriptElement.addEventListener("load", () => {
if (Stripe) {
console.log("Stripe v." + Stripe.version + " is ready. ");
} else {
console.error("Failed loading Stripe.js");
}
});
}
</script>
</body>
</html>0
In a React environment I initialize as below:
import { loadStripe } from "@stripe/stripe-js";
export let stripe = null;
export let stripe_started = false;
export let stripe_running = false;
(async () => {
try {
stripe = await loadStripe("pk_test_****");
stripe_running = true;
} catch (err) {
stripe_running = false;
} finally {
stripe_started = true;
}
})();
any module that imports this one has access to the flags; the closure allows the function to run async at top level.
0
How can I check whether stripe.js has finished executing?
Checking loadStripe() as the other answer.
async or defer? i.e. is stripe.js completely independent (async), or does it depend on the DOM being fully built (defer)?
Defer, since sometimes stripe.js and your own js will look for an element to your DOM to mount, and it will safer to be run after the full DOM is loaded
Rather than check if stripe.js has finished executing, maybe I should just move my own, inline, Stripe code (for a checkout page) into its own dedicated JS file, loaded as defer. This way things would load in a non-blocking way, and would still execute in their relative order.
Make sure to mark both stripe.js and your own dedicated JS 'defer', and put stripe.js before your JS. When there are multiple defer scripts, their execution order will be decided by the including order
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer