onload.tsx

import { useMemo, useState } from "react";
import Script from "next/script";

export default function Onload() {
  const [stripe, setStripe] = useState<{ stripe: typeof window.Stripe } | null>(
    null,
  );
  const methods = useMemo(
    () =>
      stripe
        ? Object.entries(stripe.stripe).filter(
            ([_key, value]) => typeof value === "function",
          )
        : [],
    [stripe],
  );

  function handleLoad() {
    const stripe = window.Stripe("pk_test_1234");

    console.log("Stripe loaded: ", stripe);

    setStripe({ stripe });
  }

  return (
    <>
      {/* We load Stripe sdk */}
      <Script
        id="stripe-js"
        src="https://js.stripe.com/v3/"
        onLoad={handleLoad}
      />

      <main>
        <h1>Executing code after loading</h1>
        <div>
          <p>Stripe methods: </p>
          <ul>
            {methods.map(([method]) => (
              <li key={method}>{method}</li>
            ))}
          </ul>
        </div>
      </main>
    </>
  );
}