How to check if stripe.js has finished executing?

Question

How to check if stripe.js has finished executing?

950 Views Asked by Fabien Snauwaert At 04 April 2025 at 18:33

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 async or defer attribute 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?
async or defer? 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.

Original Q&A

There are 3 best solutions below

**LeadDreamer** · Answer 1

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.

**seeker** · Answer 2

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>

**orakaro** · Answer 3

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

How to check if stripe.js has finished executing?

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ASYNCHRONOUS

Related Questions in STRIPE-PAYMENTS

Related Questions in DEFERRED-LOADING

Trending Questions

Popular # Hahtags

Popular Questions