Use context

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, { ReactNode, useLayoutEffect, useState } from 'react';
+import PaylineContext from './PaylineContext';
 
 const getBaseUrl = (production: boolean) =>
   production ? 'https://payment.cdn.payline.com/cdn' : 'https://homologation-payment.cdn.payline.com/cdn'
@@ -26,7 +27,8 @@ interface PaylineProviderProps {
 function PaylineProvider({ production = false, children }: PaylineProviderProps) {
   // add script
   const scriptUrl = getScriptUrl(production);
-  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) {
@@ -56,7 +58,7 @@ function PaylineProvider({ production = false, children }: PaylineProviderProps)
   }, [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.');