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.