Payment Status
A calm, Apple-grade payment confirmation card with animated SVG path checkmark drawing, staged verification lifecycle transitions, receipt inspection, and failure recovery.
Loading preview…
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/payment-status
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| status | 'processing' | 'verifying' | 'success' | 'failed' | 'refunded' | 'processing' | Current lifecycle state of payment |
| amount | string | number | '$149.00' | Transaction total amount formatted or numeric |
| currency | string | '#x27; | Currency symbol prepended to amount |
| transactionId | string | 'tx_9842a8d11c7f' | Unique transaction identifier |
| date | string | Date | 'Today at 3:42 PM' | Date/time timestamp of payment |
| paymentMethod | string | 'Apple Pay' | Payment gateway or card provider |
| last4 | string | '4242' | Last 4 digits of card or account |
| items | PaymentReceiptItem[] | [...] | Itemized purchase items for detailed receipt view |
| merchantName | string | 'EasyUI Cloud' | Merchant or brand organization name |
| onRetry | () => void | undefined | Callback fired when user clicks Try Again |
| onChangePaymentMethod | () => void | undefined | Callback fired when user changes card method |