Payment Method
Payment Method
Payment Method displays selectable payment options in a card-based layout with labels and selection states.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Card Padding | 16-20px |
| Card Border Radius | 8-12px |
| Icon Size | 32-40px |
| Title Font Size | 14-16px |
| Description Font Size | 12-14px |
| Border Width | 2px (selected) |
Card States
Section titled “Card States”Grey border, neutral appearance
Brand color border, check indicator
Elevated shadow, pointer cursor
Reduced opacity, not clickable
Configuration
Section titled “Configuration”The component displays payment methods grouped by category with:
- Method icons/logos
- Titles and descriptions
- Selection indicators
- Optional fee information
Payment Types
Section titled “Payment Types”| Type | Description |
|---|---|
CREDIT_CARD | Credit/debit card |
BANK_TRANSFER | Bank transfer |
E_WALLET | Digital wallet |
QR_CODE | QR payment |
CASH | Cash payment |
Card Elements
Section titled “Card Elements”| Element | Description |
|---|---|
| Icon | Payment method logo |
| Title | Display name |
| Description | Additional info |
| Selection State | Visual feedback |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Checkout payment selection
- Bill payment options
- Top-up method choice
- Donation payment options
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Show clear payment types | Cryptic abbreviations |
| Display icons/logos | Text-only cards |
| Highlight selected option | Unclear selection state |
| Group related methods | Random ordering |
| Show fees if applicable | Hidden costs |