Tengo una aplicación que usa la API de teller.io. Tengo que importar un script de ellos para iniciar la autenticación dentro de mi aplicación de reacción, ya que no tienen una biblioteca de reacción.
Después de agregar el script al DOM, tengo que usar una función de él. Sin embargo, React no reconocerá la función ya que solo se define en tiempo de ejecución cuando se agrega el script.
La siguiente es mi solución y funciona, pero sé que esta no puede ser una buena manera de lograr esto, por lo que si alguien puede recomendar una solución adecuada, sería increíble.
useEffect(() => { const script = document.createElement("script"); script.src = "https://cdn.teller.io/connect/connect.js"; script.async = true; document.head.appendChild(script); var tellerConnect = window.TellerConnect.setup({ applicationId: "Your application ID eg app_xxxxxx", onInit: function() { console.log("Teller Connect has initialized"); }, // Part 3. Handle a successful enrollment's accessToken onSuccess: function(enrollment) { console.log("User enrolled successfully", enrollment.accessToken); }, onExit: function() { console.log("User closed Teller Connect"); } }); var el = document.getElementById("myButton"); el.addEventListener("click", function() { // tellerConnect.open(); }); }, []);La línea 6, con "window.TellerConnect.setup", es lo que me gustaría arreglar/reemplazar con una solución más adecuada.
Los documentos de Teller.io para este script/configuración se pueden encontrar en: Teller Connect
¡Gracias por adelantado!
Un patrón (un gancho y un cargador JS puro) como este podría funcionar para usted.
Esto no tiene en cuenta varios componentes que intentan utilizar la API con, por ejemplo, diferentes ID de aplicación.
function loadScript(elementId, src) { if (!document.getElementById(elementId)) { const script = document.createElement('script'); script.src = src; script.id = elementId; document.head.appendChild(script); } } /** * Ensure the Teller Connect script is loaded. * * Returns the `window.TellerConnect` object once it exists. */ function loadTellerConnect() { return new Promise((resolve) => { function check() { if (window.TellerConnect) { return resolve(window.TellerConnect); } loadScript('teller-script', 'https://cdn.teller.io/connect/connect.js'); setTimeout(check, 100); } check(); }); } /** * Load and configure Teller Connect. * @returns The Teller API (or null if it hasn't yet loaded). */ function useTellerAPI(setupArgs) { const [tellerApi, setTellerApi] = React.useState(null); React.useEffect(() => { loadTellerConnect().then((tellerApi) => { tellerApi.setup(setupArgs); setTellerApi(tellerApi); }); }, [setupArgs]); return tellerApi; } function MyComponent() { const tellerConnect = useTellerAPI({ applicationId: 'Your application ID eg app_xxxxxx', }); return ( <button onClick={() => tellerConnect?.open()} disabled={!tellerConnect}> Open Teller </button> ); }