KQ-616 · CARD/TAP

Card Tap

A contactless payment drawn as a scene: push the slab toward the reader and past six tenths of its travel the tap fires, the card closing the gap on snap while rings pulse from the contact point on drift for as long as the read lasts. Approval stamps a tick on recoil; a decline never celebrates, shaking the card home on a tween instead. The slab is a real button, so Enter, Space and Right Arrow tap it without a pointer.

KQ-616 · CARD/TAP

Tap to payFernworks Depot$24.80

Tap idle · $24.80 · Fernworks Depot

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/card-tap

Props

status / defaultStatus: "idle" | "reading" | "approved" | "declined"; default "idle"; Controlled or initial phase of the tap.
onStatusChange: (status: CardTapStatus) => void; default —; Fires from the gesture or key that moved the card to the reader.
onTap: () => void; default —; Fires once the card reaches the reader — start the authorisation here.
amount: number; default 0; The sum being tapped.
format: (value: number) => string; default Intl.NumberFormat USD; Formats every amount; the stage never invents a currency.
merchant: string; default "Fernworks Depot"; Who is being paid.
network: string; default "Waylight"; Network wordmark printed on the slab.
last4: string; default "4417"; Last four digits printed on the slab.
declineReason: string; default "Card limit reached"; Printed under the stage when the tap is refused.
label: string; default "Tap to pay"; Names the group for assistive technology.

Prop	Type	Default	Description
status / defaultStatus	"idle" \| "reading" \| "approved" \| "declined"	"idle"	Controlled or initial phase of the tap.
onStatusChange	(status: CardTapStatus) => void	—	Fires from the gesture or key that moved the card to the reader.
onTap	() => void	—	Fires once the card reaches the reader — start the authorisation here.
amount	number	0	The sum being tapped.
format	(value: number) => string	Intl.NumberFormat USD	Formats every amount; the stage never invents a currency.
merchant	string	"Fernworks Depot"	Who is being paid.
network	string	"Waylight"	Network wordmark printed on the slab.
last4	string	"4417"	Last four digits printed on the slab.
declineReason	string	"Card limit reached"	Printed under the stage when the tap is refused.
label	string	"Tap to pay"	Names the group for assistive technology.