Payment Status
A calm, Apple-grade payment confirmation card with animated SVG path checkmark drawing, staged verification lifecycle transitions, receipt inspection, and failure recovery.
Payment Successful
Your purchase with EasyUI Cloud is confirmed.
Total$149.00
Transaction ID
Date & TimeToday at 3:42 PM
Payment MethodApple Pay (•••• 4242)
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 |