Gift Card

Demo & usage

More examples

When to use

• A live preview beside a gift-card purchase or gifting form.
• An e-gift confirmation email or order receipt.
• The account wallet, showing a redeemable balance and code.
• A support console, where the last four identifies the card and nobody needs the code.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Five gradient themes (aurora, gold, rose, midnight, mint).
• Toggle the amount, redeem-code row, code masking and the copy button.
• Reveal gate: requireAuthorization, revealAuthorized, revealRequest, and revealTimeout for the auto-hide (0 disables it).
• balance renders what is left against the face value, with a bar; 0 reads as redeemed.
• status of active / redeemed / void, plus expired derived from expiresAt and timeZone.
• now injects the clock, for tests or for a card that should flip while it is open.
• Every label is an input: redeemedLabel, expiredLabel, voidLabel, remainingLabel, revealLabel, hideLabel, verifyLabel, copyLabel, copiedLabel, copyFailedLabel.
• Recipient, sender, greeting and a validity line.
• Custom brand name and amount caption.

Best practices

• Do: Bind the same signals to the card and to your gifting form for a live preview.
• Do: Answer revealRequest with a real step-up — a password prompt, a passkey, an OTP — then set revealAuthorized.
• Do: Log codeCopied as it arrives: it carries the last four and the time, which is what an auditor needs.
• Do: Pass expiresAt with the merchant timeZone rather than a free-text expiry, so the card actually expires — and expires at one moment for every customer.
• Do: Pass the status your API returned; the card derives expired and treats a zero balance as redeemed on its own.
• Do: Set a currency and locale so the amount formats correctly for the buyer.
• Don't: Do not switch requireAuthorization off just to save a click. Leave it on unless the screen is already behind a fresh re-authentication.
• Don't: Do not put the code in your own audit payload alongside the event — that is exactly the leak the event was shaped to avoid.
• Don't: Do not rely on the free-text expiry for anything but display; it carries no logic, so a stale line still reads as an active card.
• Don't: Do not treat this as an input — it is a display; collect the amount and message with your own form controls.

Accessibility

• The reveal control is a real button whose label says what pressing it will do — verify, reveal, or hide — and it activates on Enter and Space.
• The copy button is a real button with its own label; the outcome is announced once through a status region, not on every tick.
• The auto-hide countdown is hidden from assistive tech, since the button label already carries the fact and a per-second live figure would repeat itself.
• The state chip is text, not a colour: Redeemed, Void and Expired are read out, and the chip declares its own background and ink so the pair is contrast-checkable on all five gradients.
• A spent card is desaturated with a luminance-preserving grayscale filter rather than dimmed with opacity, so the measured ink still clears AA.
• The ribbon, gift mark, shimmer and balance bar are decorative and hidden from assistive tech.
• Each theme carries the one ink measured against all three of its own gradient stops, so contrast holds in light and dark mode.