Pay-Pi sample checkout

A minimal, runnable example of integrating Pay-Pi exactly the way the docs describe (pay-pi.com/docs/finix-js + pay-pi.com/docs/api-reference):

1. The browser tokenizes the card with Finix.js — raw card details go straight to Finix and never touch your server.
2. The browser sends only the token to your backend.
3. Your backend adds the secret X-Api-Key and calls POST /v1/payments.

No build step, no dependencies — just Node 18+.

public/index.html   the checkout page (Finix.js v2 tokenization)
server.mjs          the backend (/config, /pay, /refund) — holds the secret key

Run it (about 2 minutes)

1. Get a sandbox API key. Log in to your dashboard → API keys → New key. Copy the lc_live_… value (it's shown only once). Your merchant must be onboarded / charges-enabled — the dashboard shows this.

2. Set your key + API base. Easiest — copy .env.example to .env and fill in your key (the server loads .env automatically; works on any OS/shell):

   PAYPI_API_KEY=lc_live_...your key...
   PAYPI_API_BASE=https://payments-cqcrd4hxaec7dtdw.southcentralus-01.azurewebsites.net
   

   Or set them in your shell instead of a file:

   # macOS / Linux (bash/zsh)
   export PAYPI_API_KEY="lc_live_..."
   export PAYPI_API_BASE="https://payments-cqcrd4hxaec7dtdw.southcentralus-01.azurewebsites.net"

   # Windows PowerShell
   $env:PAYPI_API_KEY="lc_live_..."
   $env:PAYPI_API_BASE="https://payments-cqcrd4hxaec7dtdw.southcentralus-01.azurewebsites.net"

   Note: the docs use https://connect.pay-pi.com as the base, but that custom domain isn't live in DNS yet — use the sandbox host above until it is.

3. Start it:

   node server.mjs

4. Open http://localhost:3000, enter the sandbox test card, pick an amount, and click Pay.

   • Test card: 4111 1111 1111 1111, any future expiry, any 3-digit CVC.
   • On the sandbox the amount drives the outcome: $4.99 approves, $0.51 declines, $0.01 is "call issuer".
   • A successful payment shows the response (lcPaymentId, status: succeeded, fee, Finix ids) and a Refund button.

What to look at

• server.mjs — /config returns only the public Finix values (from GET /v1/meta); /pay is where the secret key is added and POST /v1/payments is called with a required Idempotency-Key. The key is never sent to the browser.
• public/index.html — loads js.finix.com/v/2/finix.js, mounts Finix.PaymentForm(...), and on submit reads the token at response.data.id, then POSTs it to /pay.

Going live

When the production environment (and the connect.pay-pi.com domain) is available, swap PAYPI_API_BASE to it and use a live key. Because the browser reads the app id + environment from /v1/meta at runtime, the frontend needs no change — /v1/meta returns the live values automatically.

See also

• Finix.js tokenization guide — the browser half, in depth.
• API reference — every endpoint this sample uses (and the rest).
• No-code check: the dashboard → Developer → Test your integration runs the same tokenize → charge → refund from your account without cloning anything.

License

MIT — see LICENSE. Copy freely.