Interactive designer

Configure <govifi-payment> below — the preview is the real component running against demo data (no network, no credentials). When it looks right, copy the snippet for your stack and swap in your session id and client secret.

Demo preview

The preview uses a mock session (City of Example, $142.27) — no payment is possible here. Card fields render from the secure elements origin: in production that’s automatic; running this site locally, start the elements dev server (pnpm dev:elements, port 4174) and the preview uses it.

Want to run the real end-to-end flow (real sessions, live webhooks)? That’s the test harness app: pnpm dev:harness → http://localhost:4600.