React hook for tilled.js

useTilled.ts

import React from "react";

const scriptId = "tilled-js";

/**
 * Load and expose the tilled.js PCI-compliant payment capture utility.
 * https://api.tilled.com/docs#section/Tilled.js
 */
const useTilled = () => {
  const [tilled, setTilled] = React.useState<any>(undefined);
  const publishableKey = process.env.NEXT_PUBLIC_TILLED_PUB_KEY;
  const account = process.env.NEXT_PUBLIC_BASE_TILLED_ACCT;

  if (!publishableKey) {
    throw new Error("no NEXT_PUBLIC_TILLED_PUB_KEY in env");
  }
  if (!account) {
    throw new Error("no NEXT_PUBLIC_BASE_TILLED_ACCT in env");
  }

  React.useEffect(() => {
    const existingScript = document.getElementById(scriptId);
    if (!existingScript) {
      const script = document.createElement("script");
      script.src = "https://js.tilled.com/v2";
      script.id = scriptId;
      document.body.appendChild(script);
      script.onload = () => {
        if ((window as any).Tilled) {
          setTilled(
            new (window as any).Tilled(
              publishableKey,
              account,
              window.location.origin === "https://app.golaunchpad.com"
                ? {}
                : { sandbox: true }
            ) as any
          );
        }
      };
    }
    if (existingScript && !tilled && (window as any).Tilled) {
      setTilled(
        new (window as any).Tilled(
          publishableKey,
          account,
          window.location.origin === "https://app.golaunchpad.com"
            ? {}
            : { sandbox: true }
        ) as any
      );
    }
  });

  return tilled;
};

export default useTilled;