Skip to main content

​
Trigger flow

The Pay button lives in the order summary panel (OrderSummary in order-panel.tsx). Tapping it calls onPay in CartScreen, which opens PaymentScreen. Payment completion is centralized in CartScreen.handlePaymentConfirm.

​
Layout

Full-screen overlay (fixed inset-0) with a three-pane desktop layout. Panes stack vertically on smaller breakpoints.

​
Payment methods

On open, the screen calls POST /pos-react/api/payments/methods with pos_config_id, is_refund, and amount_total. Methods are sorted by sequence and rendered as buttons. Payment lines append to a local list for in-screen visibility. On Done, they are translated to Odoo statement_ids entries using method-provided statement_id, account_id, and journal_id.

​
Credit payments

When a customer with a credit limit is assigned to the order, a credit payment button appears in the tender grid. Tapping it verifies eligibility via the backend before adding a credit line. Credit lines are filtered from statement_ids during order submission — they do not create journal entries. See Credit payments for the full flow and API details.

​
Split and extra actions

  • Split evenly — Opens SplitEvenlyDialog, sets amount tendered to per-guest amount
  • Rewards — Extension point (currently shows a placeholder toast)
  • Service charge — Extension point (currently shows a placeholder toast)

​
Completion

Done is enabled only when balance due reaches zero. Payment completion is handled by CartScreen.handlePaymentConfirm, which routes through the hub or direct API.
1

Submit order

When hub sync is active, order finalization goes through transport.finalizeOrder() with a full order snapshot including payment lines. If the hub fails, the system falls back to the direct API (/orders/create or /orders/update) automatically.
2

On success

Local order is marked paid, table is freed, user is redirected to the floor plan (backHref preserves /?area=... context when present)
3

On failure

Payment screen stays open, user can retry. Table is not freed until submission succeeds.

​
Keypad input

The amount keypad uses a pure function applyKeypadInput(current, key) in types.ts for all input handling. It enforces a single decimal point and a maximum of two decimal places. Keys: digits 0-9, ., C (clear to zero), BACK (delete last character).

​
Source files