Cash Collect

A cash-on-delivery panel - order total plus delivery fee minus prepaid, the amount received, and live short, exact or change-due feedback, with quick amounts and confirm.

PreviewOpen ↗

Code

<CashCollect orderTotalMinor={8500} deliveryFeeMinor={1500} onConfirm={(minor) => save(minor)} />

Delivery · beta

Live examples and controls: Cash Collect in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/cash-collect.json

What the courier must take at the door and what to hand back. Amounts are integer minor units (cents, halalas).

When to use

Confirming cash at drop-off.

When not to use

Card or wallet payment: use Price and your payment flow.
Settling a courier at day end: use Wallet or the ledger.

Import

import { CashCollect, cashBreakdown } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick start

<CashCollect orderTotalMinor={8500} deliveryFeeMinor={1500} onConfirm={(minor) => save(minor)} />

Anatomy

CashCollect  data-slot="cash-collect"  data-state
├─ breakdown: total, fee, prepaid, due
├─ CurrencyInput + quick amounts
├─ state line: short / exact / change
└─ Confirm

API

Prop	Type	Default	Description
`orderTotalMinor`	`number`	required	Goods total.
`deliveryFeeMinor`	`number`	`0`	Added to the total.
`prepaidMinor`	`number`	`0`	Already paid; subtracted.
`currency`	`string`	`"USD"` (`"SAR"` in Arabic)	ISO currency.
`collectedMinor` / `defaultCollectedMinor`	`number \| null`	none	Controlled or initial received amount.
`onCollectedChange`	`(minor) => void`	none	Input change.
`onConfirm`	`(minor) => void`	none	Confirm tapped.
`allowShort`	`boolean`	`false`	Allow confirming less than due.
`quickAmounts`	`number[]`	derived	Quick-pick buttons, minor units.
`loading`	`boolean`	`false`	Disables confirm.
`locale` / `labels`	`"en" \| "ar"` / partial strings	context	Language and overrides.

cashBreakdown({ orderTotal, deliveryFee, prepaid, collected }) returns { due, collected, shortBy, change, state } where state is unpaid, short, exact or over.