This code snippet loads the Razorpay checkout script dynamically on the client-side. It checks if the script is already loaded and if not, it creates a script tag and appends it to the document body to load the script.

Dynamic Script Loading for Razorpay Checkout Integration.md

Dynamic Script Loading for Razorpay Checkout Integration

Preview:

const RAZORPAY_SCRIPT = "https://checkout.razorpay.com/v1/checkout.js";

  const isClient = useMemo(() => typeof window !== "undefined", []);

  const [isLoaded, setIsLoaded] = useState(false);

  const checkScriptLoaded: () => boolean = useCallback(() => {
    if (!isClient || !("Razorpay" in window)) return false;
    return true;
  }, []);

  const loadScript = useCallback((scriptUrl: string) => {
    if (!isClient) return; // Don't execute this function if it's rendering on server side
    return new Promise((resolve, reject) => {
      const scriptTag = document.createElement("script");
      scriptTag.src = scriptUrl;
      scriptTag.onload = (ev) => {
        setIsLoaded(true), resolve(ev);
      };
      scriptTag.onerror = (err) => reject(err);
      document.body.appendChild(scriptTag);
    });
  }, []);

  useEffect(() => {
    if (!checkScriptLoaded()) {
      (async () => {
        try {
          await loadScript(RAZORPAY_SCRIPT);
        } catch (error: any) {
          throw new Error(error);
        }
      })();
    }
  }, []);

Associated Context
Type	Code Snippet ( .ts )
Associated Tags	RAZORPAY_SCRIPT useMemo useState useCallback loadScript Promise scriptUrl onload Framework: React reactjs wordpress-rest-api stripe-payments Razorpay integration js Client-side rendering isClient isLoaded
💡 Smart Description	This code snippet defines a custom hook called "checkScriptLoaded" that checks if the Razorpay script is loaded. It uses memoization and state variables to check if it's not already defined on server side, then renders an HTML document with its src This code snippet loads the Razorpay checkout script dynamically on the client-side. It checks if the script is already loaded and if not, it creates a script tag and appends it to the document body to load the script.
🔎 Suggested Searches	React useMemo checkScriptLoaded
Related Links	https://checkout.razorpay.com/v1/checkout.js https://www.freecodecamp.org/news/how-to-use-redux-in-your-react-typescript-app/ https://www.freecodecamp.org/news/how-to-build-a-todo-app-with-react-typescript-nodejs-and-mongodb/ https://www.sitepoint.com/react-with-typescript-best-practices/ https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
Related People	Sumanta Kabiraj
Sensitive Information	No Sensitive Information Detected
Shareable Link	https://sumanta.pieces.cloud/?p=f70c459e7c