Gift Card
Gift Card Balance
Gift card balance checker and redemption form for checkout.
A component for checking gift card balances and applying them to orders. Shows a code input, lookup button, and displays card details (balance, status, expiry) with a redeem action.
Preview
GIFT-ABCD-1234
active$75.50 of $100.00
Expires: 12/31/2025
Usage
<CGiftCardBalance
:gift-card="lookupResult"
@lookup="handleLookup"
@redeem="handleRedeem"
/>
Loading State
<CGiftCardBalance loading />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
giftCard | GiftCard | null | null | Looked-up gift card data |
loading | boolean | false | Lookup or redeem in progress |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
lookup | string | Code submitted for balance check |
redeem | RedeemGiftCardInput | Apply to order { code } |
Status Colors
| Status | Badge Color |
|---|---|
active | success |
inactive | warning |
redeemed | neutral |
expired | error |
cancelled | error |