The customer journey

Who owns which screen

Both applications draw on the same screen, so from the customer's side this is one continuous
journey. From yours it is a handover: your FCS app owns ten of the twelve screens. The
payment app comes forward twice, for the card and the result, and is otherwise not visible.

So the build is mostly your app. The payment app already provides the two screens in bold, and
you neither draw them nor style them — they appear when you hand over and disappear when it
hands back.

The screens in order

Diagrams for each screen are in docs/afd-screens/en/ and docs/afd-screens/ar/ as SVG,
same filenames in both, numbered in flow order and ready to upload. 00-flow.svg is the
branch above as a diagram.

The Arabic carries the SAMA framework's audited wording verbatim; the interface labels around it
were written for this document and want a native reviewer before they face a customer.

They are greyscale wireframes, and that is not a shortcut. The screens they describe
belong to a customer, and the palette and visual design are theirs; what is generic - and
what a specification is actually for - is the content of each screen, the controls on it,
and the order they come in. Hierarchy is carried by weight, size and border rather than
colour, and outcomes are distinguished by glyph rather than green or red, so they also
survive being printed in black and white.

Generic copy, taken from a working implementation. Wording that is audited is marked; the rest
is one vendor's realisation and can be adapted.

1 — Language. Two buttons, Arabic and English, each in its own language. Everything after

this point is in the language chosen.

**2 — Amount. This is the only branch in the journey, and it decides two things at once:

what the customer sees next, and what the payment app is asked to hold.**

Two of the three paths have no intermediate screen at all. Only Other amount inserts one,
and its only job is to settle the figure before anything is authorised.

Select the amount in (SAR) to fill:

  [  10  ]  [  50  ]
  [ 100  ]  [ OTHER AMOUNT ]

  [        FULL TANK        ]

Full tank is visually distinct from the presets — it is the option that maps to the SAR 300
ceiling rather than to a figure the customer chose.

3 — Other amount. A numeric keypad with DEL, CANCEL and OK, the running value shown

large. Over the limit, a dialog rather than a silent rejection:

Please enter an amount below 300 SAR.

The customer stays on the keypad with their digits intact. Validate before the
pre-authorisation, not after — a decline for exceeding a scheme limit is a bad way to tell
someone the maximum.

4 — Present card (payment app). Shows the amount about to be held, in both languages, with a

progress indicator for the stages of the transaction:

Authorization / تفويض
Present Card or Device / استخدم البطاقة او الجهاز
Total Amount / المبلغ الإجمالي
SAR 50.00

Note the heading: this is an authorisation, and the screen says so rather than implying a
purchase.

5 — Result (payment app). The outcome over the receipt, then the receipt choice:

✓ AUTHORIZATION / مقبولة / APPROVED

then QR CODE or NO RECEIPT. The terminal has no printer, so the QR is the receipt.

6 — Lift the nozzle. Countdown, the amount held, and the sentence that does the most work

on the whole forecourt:

SAR 50.00
Please lift nozzle to start fuelling.

Please note: When fuelling with a less amount is complete, the remaining amount will be
released to your account.

That note is audited wording and it is the answer to the only question a customer has when
they see 50.00 held for a 30.00 fill. A CANCEL button releases the hold before any fuel moves.

The countdown is the void timer from the matrix in section 7, The scenario matrices made visible — the customer can
see how long they have before the hold is released automatically.

7 — Fuelling.

Fuelling in progress…
Return the fuel nozzle once fuelling is complete.

Cancel here is not the cancel on the previous screen, and that is worth being careful about.
Before any fuel moves, cancel voids the authorisation and the customer is charged nothing. Once
fuel is flowing there is nothing to void — the fuel is in the tank. Cancel stops the pump and
the transaction settles as a capture for the amount already delivered, which is the Finish
user action in the capture matrix in section 7, The scenario matrices.

So the customer is charged either way; the button decides how much, not whether. If your copy
implies otherwise, someone who presses it at forty riyals will expect to pay nothing and will
call to say so.

8 — Capture result. What the customer is told depends on the row of the capture matrix.

Full amount delivered:

Please return the Nozzle
Fueling is completed by SAR ×××.

Less than authorised — the common case:

Fueling is completed by SAR ×××, The remaining amount will be released to your account.

Pump fault:

Technical issue, Please return the Nozzle.
Fueling is completed by SAR ×××, The remaining amount will be released to your account.

Each carries a countdown and an OK, so the customer can dismiss it rather than wait.

9 — Void result.

✕ Transaction Void
No fueling happened, full amount will be released to your account.

10 — Decline.

✕ Declined
Sorry, you cannot complete the fuelling due to the declined reason of the transaction.

And the nozzle must not release. That is the audited part, and it is the terminal's
responsibility rather than the pump's.

Certified wording

The SAMA framework fixes the copy for the main journey in both languages. This is what an audit
checks against:

A declined pre-authorisation:

Sorry, you cannot complete the fueling due to 'the declined reason of the transaction'.
نعتذر لعدم إتمام عملية تعبئة الوقود نظرًا لـ "سبب رفض العملية والظاهر على الإيصال"

Four things worth copying

Every terminal screen has a countdown. Nothing on a forecourt waits indefinitely for a
customer who has walked away, and showing the timer is kinder than a screen that changes without
warning.

Every result screen has an OK. The customer dismisses it; the timer is the fallback, not the
mechanism.

The amount is repeated at every step — on the card prompt, on the lift-nozzle screen, on the
result. On a hold that can be three times the final charge, silence about the figure is what
generates the support call.

Say what happens to the difference, early and twice. The remaining-amount sentence appears
before fuelling starts and again when it finishes. It is audited wording for good reason.

---

← The amounts  ·  Contents  ·  The scenario matrices →