Payment done | Lime design system

Examples

Send, then undo

When to use it

Use: Right after the person sends, pays or moves money themselves, on the screen they sent it from.
Use: A payment that can be pulled back for a few seconds before it leaves.
Not for: What the assistant did on its own. Use Action receipt.
Not for: The assistant asking before it pays. Use Approval request.
Not for: A small action that needs no amount, such as saving a nickname. Use Toast.

7 rules

Must: Pass amount signed, negative for money out, the same number that left the account. Because a positive 45 prints and reads without the minus, so it looks like money in.
Must: Drive state from the payment: sending until the bank confirms, then sent; undone only after the money is back. Because the live footer announces Sent at once, and the person trusts money that may not have left.
Must: Set undoFor to the real time the payment can still be stopped; 0 when it cannot. Because undoFor defaults to 30, so a payment that cannot be stopped still offers Undo.
Must: Set undoPending while the undo runs, so Undo shows its spinner and the clock stops. Because otherwise the clock runs out mid-undo and the button vanishes with no outcome.
Should: Put the name in to and how it went in detail: the account it left and when it arrives.
Should: Show one per screen, at the top of what the person sees after sending.
Never: Also show a toast for the same payment; the card is the confirmation. Because the toast brings a second Undo on its own clock and announces the payment twice.

5 checks

: The card is a group named Payment to and the name; the amount is read as words.
: The footer is a polite live region, so Sending, Sent and Undone are read out as they change.
: Undo is described as available for the set seconds; the ticking clock is hidden from screen readers.
: When Undo leaves while focused (pressed or expired), focus moves to the status, never to the page top.
: Undone strikes through the amount and says Undone; the line is never the only signal.

6 edge cases

Long name: The name and detail truncate; the amount never shrinks.
Undo runs out: Undo goes away and the status stays; the footer keeps its height.
Undo fails: Keep state sent and say why on the screen; the payment went through.
Money in: A positive amount shows without a sign; use it for a request that was paid.
Right to left: The row mirrors; the amount keeps left-to-right digits.
Reduced motion: The Sending spinner keeps turning; nothing else moves.

9 props

10 tokens