Interactive Demo
The integration you're about to build: FINA as a payment method inside your own storefront. Play the buyer — the console shows every API call your backend would make, and each request, response and error code matches the integration guide.
- Regions tagged FINA API are rendered from FINA API data — everything else is your own UI.
- Web / App flips the same integration between a desktop website and a mobile app.
- The small grey notes at the bottom of the screens (iframe embedding, webhooks, redirect URLs) are annotations for you, the integrator, linking to the relevant reference page — not part of the buyer-facing UI.
What each scenario shows
- New buyer — Sara isn't on FINA yet — Check Eligibility returns a
signup_urland she onboards in the embedded iframe before checking out. - Happy path — Mohammed's credit covers every plan and none of them needs a down payment — the straight eligibility → plans → OTP → AUTHORISED run. Enter a wrong OTP once here to see error 809 handling.
- Down payment — Every plan offered to Fatima requires a down payment (
requires_prepaid_collection) — after OTP the order waits at AUTHORIZATION_INITIATED and she pays SAR 25 on FINA's hostedpayment_urlpage. On that page you can also simulate a failed payment (failure redirect + Reconcile Prepaid Payment) or the buyer leaving mid-payment and resuming later from your orders list — plus the signed webhook on success. - Low credit — Khalid's SAR 80 credit is below the SAR 100 cart, so every plan comes back with
has_enough_credits: falseand all of them are disabled. FINA is a dead end for this cart — the checkout falls back to mada or cash on delivery, and no further FINA call is made.
- 1 Eligibility
- 2 Choose plan
- 3 Place order
- 4 Verify OTP
- 5 Delivered
Your storefront UIPowered by FINA APIDemo controls
Demo controls
Choose a scenario
Pick the buyer you want to play. The storefront checkout opens signed in as that buyer — each scenario exercises a different API path.
Switch anytime — every scenario starts a fresh order and a clean console.
API consoleSandbox · simulated
Your integration's API calls will appear here as the buyer moves through checkout.
Responses are simulated — shapes, statuses and error codes match the API reference. Live sandbox mode ships in Phase 2.