Use contexte

src/PaylineContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const PaylineContext = createContext<{isLoaded: boolean}>({isLoaded: false});
+
+export default PaylineContext;

src/PaylineProvider.tsx

@@ -1,4 +1,5 @@
 import React, { useLayoutEffect, useState } from 'react';
+import PaylineContext from './PaylineContext';
 
 type PropsType = {
   production?: boolean;
@@ -20,7 +21,8 @@ const PaylineProvider: React.ComponentType<PropsType> = ({ production = false, c
 
   // add script
   const scriptUrl = `${baseUrl}/scripts/widget-min.js`;
-  const [, setIsLoaded] = useState(window.Payline !== undefined);
+  const [isLoaded, setIsLoaded] = useState(window.Payline !== undefined);
+
   useLayoutEffect(() => {
     let script: HTMLScriptElement | null = document.querySelector(`script[src="${scriptUrl}"]`);
     if (!script) {
@@ -50,7 +52,7 @@ const PaylineProvider: React.ComponentType<PropsType> = ({ production = false, c
   }, [stylesheetUrl]);
 
   // render children
-  return <>{children}</>;
+  return <PaylineContext.Provider value={{isLoaded}}>{children}</PaylineContext.Provider>;
 };
 
 export default PaylineProvider;

src/usePayline.ts

@@ -1,3 +1,6 @@
+import { useContext } from "react";
+import PaylineContext from "./PaylineContext";
+
 // See https://docs.payline.com/display/DT/API+JavaScript for full documentation of Payline API
 type PaylineApi = {
   endToken: (
@@ -37,6 +40,7 @@ declare global {
 
 const usePayline = () => {
   if (typeof window === 'undefined') return undefined;
+  if (!useContext(PaylineContext).isLoaded) return undefined
 
   if (!window.Payline)
     throw new Error('window.Payline is unavailable. Check if PaylineProvider is rendered within the component tree.');