React

// postToVerify.ts
export function postToVerify(
  verifyUrl: string,
  handoff: string,
  extras: Record<string, string | undefined> = {},
) {
  const f = document.createElement("form");
  f.method = "POST";
  f.action = verifyUrl;                 // bare endpoint, no query string
  f.style.display = "none";

  const add = (name: string, value: string) => {
    const i = document.createElement("input");
    i.type = "hidden";
    i.name = name;
    i.value = value;
    f.appendChild(i);
  };

  add("hx", handoff);                   // the handoffField from /session
  Object.entries(extras).forEach(([k, v]) => v && add(k, v));

  document.body.appendChild(f);
  f.submit();
}

import { postToVerify } from "./postToVerify";

async function startVerify() {
  const r = await fetch("/verify/start", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    credentials: "include",
    body: JSON.stringify({
      action: "payment",              // your own value — login, phone-change, approval, …
      params: { paymentId: 8842 },    // whatever that action needs
      destination: "0501234567",
    }),
  });
  const data = await r.json();
  if (!data.verifyUrl || !data.handoff) throw new Error("no handoff");
  postToVerify(data.verifyUrl, data.handoff);   // optional: { lang: "ar" }
}

export function VerifyDone() {
  const [ok, setOk] = useState<boolean | null>(null);

  useEffect(() => {
    // Ask YOUR backend — it is the one that called GET /session/{id}.
    fetch("/verify/result" + window.location.search, { credentials: "include" })
      .then((r) => r.json())
      .then((res) => setOk(res.ok));
  }, []);

  if (ok === null) return <p>Checking…</p>;
  return ok ? <p>Payment confirmed.</p> : <p>Verification failed.</p>;
}