KQ-923 · PAY/REQUEST

Pay Request

A request for money sent as a message — a record of an ask, never a transfer. The amount rolls: each digit column takes its new position on snap so a re-split reads as the figure changing rather than the row redrawing. Under it a confirm track takes a deliberate gesture — the knob follows the pointer and captures it only after 4px of travel, returns on snap short of the threshold, and commits past it — and committing stamps a PAID mark from 1.16× on recoil while the track cross-fades to a settled row in one shared grid cell. The knob is a real slider: arrows step it, End commits, Escape abandons, Enter commits from where it stands.

KQ-923 · PAY/REQUEST

Ines is asking for
Ines is asking for 42.50 BSN.
Supper at the Coldbrook rooms, split three ways
Waylight Pay · a request, not a transfer
14:06

42.50 BSN · requested by Ines · not paid

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/pay-request

Props

request: PayRequestMessage; default —; The message: id, from, who is asking, the amount, an optional note, time and delivery mark.
format: (amount: number) => string; default en-US, two decimals; Formats the amount; the figure is rounded to cents before it reaches it.
currency: string; default "BSN"; The unit printed beside the amount; it never rolls.
paid / defaultPaid: boolean; default false; Controlled or initial settled state; the track gives way to the settled row.
onPay: () => void; default —; Fires once, the moment the gesture or key commits.
onProgressChange: (percent: number) => void; default —; Fires with the knob's whole-percent position as it moves.
threshold: number; default 0.6; Share of the track the knob must pass to commit; short of it the knob returns.
paidAt: string; default —; Already formatted; printed in the settled row. The component never reads a clock.
provider: string; default "Waylight Pay"; Printed in the footer beside the note that this is a request and not a transfer.
peerName: string; default "Them"; Names the sender in the delivery sentence.
label: string; default "Thread"; Names the thread for assistive technology.
disabled: boolean; default false; Holds the track; the card still reads.

Prop	Type	Default	Description
request	PayRequestMessage	—	The message: id, from, who is asking, the amount, an optional note, time and delivery mark.
format	(amount: number) => string	en-US, two decimals	Formats the amount; the figure is rounded to cents before it reaches it.
currency	string	"BSN"	The unit printed beside the amount; it never rolls.
paid / defaultPaid	boolean	false	Controlled or initial settled state; the track gives way to the settled row.
onPay	() => void	—	Fires once, the moment the gesture or key commits.
onProgressChange	(percent: number) => void	—	Fires with the knob's whole-percent position as it moves.
threshold	number	0.6	Share of the track the knob must pass to commit; short of it the knob returns.
paidAt	string	—	Already formatted; printed in the settled row. The component never reads a clock.
provider	string	"Waylight Pay"	Printed in the footer beside the note that this is a request and not a transfer.
peerName	string	"Them"	Names the sender in the delivery sentence.
label	string	"Thread"	Names the thread for assistive technology.
disabled	boolean	false	Holds the track; the card still reads.