Gift Card
Gift Card Form
Gift card purchase form with amount selection, recipient details, and personalization.
A form for purchasing gift cards. Supports pre-defined amount selection, custom amount input, digital/physical toggle, recipient details, and personal message.
Preview
Send a Gift Card
Usage
<CGiftCardForm @submit="handlePurchase" />
Custom Amount Options
<CGiftCardForm :amounts="[50, 100, 250, 500]" currency="USD" @submit="handlePurchase" />
Loading State
<CGiftCardForm loading />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
amounts | number[] | [25, 50, 100, 150, 200, 500] | Pre-defined amount options |
currency | string | 'SAR' | Currency code |
loading | boolean | false | Form submitting |
ui | Partial<{...}> | — | Per-instance theme overrides |
Events
| Event | Payload | Description |
|---|---|---|
submit | PurchaseGiftCardInput | Form submitted { amount, currency, recipientEmail?, recipientName?, senderName?, message?, isDigital } |
Features
- Amount selection: Click pre-defined amounts or enter a custom value
- Card type toggle: Digital (email) or physical card
- Recipient details: Name, email (for digital), sender name
- Personal message: Optional textarea for personalization
- Smart CTA: Shows currency + amount in the submit button