Delegated paymentPro

Grant an agent a spend limit, a merchant scope and an expiry, then watch it spend: a token summary, a usage meter with a segment per charge, and revoke one confirm away.

Markdown

On this page

ProA pantry agent asks for a weekly budget; once allowed, charges land as segments of the meter.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/delegated-payment

Usage

tsx

import { DelegatedPayment } from "@/components/ui/chatcn/pro/delegated-payment"

<DelegatedPayment
  agent="Pantry agent"
  status={status}
  merchants={merchants}
  expiries={expiries}
  grant={grant}
  onGrantChange={setGrant}
  onApprove={createToken}
  tokenId="spt_…8f3a"
  charges={charges}
  onRevoke={revokeToken}
/>

In request the agent's ask arrives prefilled through grant, and people adjust the limit, the merchants and the expiry. A sentence restates the grant in plain words before anyone presses Allow, and the button names the amount.

Once active, the widget shows the masked token, the time left, the money left and a meter where every charge is its own segment: hover a segment or a row to see what it bought. The meter turns amber past 80 % and red at the limit, always with a label. Revoke asks for a second press and then calls onRevoke; your server kills the token.

Examples

Near the limit, revoked, error and RTL

ProNear the limit, limit reached, revoked, no charges yet and an error on approve.

Props

Prop	Type	Notes
`agent`	`string`	Who gets the spend
`status`	`"request" \| "granting" \| "active" \| "revoked" \| "expired" \| "error"`	Default `request`
`merchants`	`DelegatedMerchant[]`	`{ id, label, detail? }`
`expiries`	`DelegatedExpiry[]`	`{ id, label, until }`
`presets`	`number[]`	Limit choices. Default 25, 50, 100, 250
`grant`, `defaultGrant`, `onGrantChange`	`DelegatedGrant`	`{ limit, merchants, expiry }`
`onApprove`, `onDecline`		Request actions
`tokenId`	`string`	Masked, never the full token
`charges`	`DelegatedCharge[]`	`{ id, merchant, amount, at, label? }`, oldest first
`timeLeft`, `endedAt`	`string`	Already formatted
`onRevoke`	`() => void`	After the confirm press
`error`	`ReactNode`	What failed and what to do
`currency`, `locale`	`string`	Default EUR, en-GB

Keyboard

Key	Action
`Tab`	Limits, merchants, expiry, then Allow
`Enter`, `Space`	Pick a limit, toggle a merchant, Allow or Revoke

Accessibility

Limits and expiry are radio groups, merchants are toggle buttons. The grant sentence is a polite live region, so every change is read back in words.
The usage meter is a meter with the spend in words. Status tags pair color with a label.
Revoke confirm explains that the token stops at once and resets after 4 s.

Motion

Pills press to 0.97. Meter segments dim other charges in 150 ms on hover. Nothing else moves.