Payment Summary
Payment Summary
Payment Summary displays order details in a compact, responsive format that hides on mobile devices with configurable labels and row data.
Visual Specifications
Section titled “Visual Specifications”| Property | Desktop | Mobile |
|---|---|---|
| Display | Visible | Hidden (auto) |
| Padding | 16-24px | - |
| Background | White/light grey | - |
| Border Radius | 8px | - |
| Font Size | 14px | - |
Responsive Behavior
Section titled “Responsive Behavior”Summary displayed with all rows visible
Automatically hidden on mobile screens
Override to show on mobile if needed
Configuration
Section titled “Configuration”The component displays summary information as rows with:
- Field labels
- Field values
- Proper currency formatting
Row Structure
Section titled “Row Structure”| Element | Description |
|---|---|
| Label | Field name |
| Value | Field value (formatted) |
| Constant | Value |
|---|---|
MAX_MOBILE_WINDOW_WIDTH | 768px |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Checkout review pages
- Order confirmation displays
- Invoice summaries
- Account statement views
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Hide on mobile for cleaner UI | Cramped mobile display |
| Show clear labels | Vague field names |
| Format currency properly | Unformatted numbers |
| Group related fields | Random data order |