# Checkout Counter

## Purpose
Checkout Counter is the public-facing payment page where end users (customers) complete their payments. Unlike admin pages, it has no sidebar and is designed for a streamlined payment experience. It supports multiple payment methods including Mobile Money, Card, and Bank Transfer.

## Components
- Merchant info header
- Payment method tabs (Card, Mobile Money, Bank Transfer)
- Order summary card
- Payment form (varies by method)
- Submit payment button
- Payment Success/Failed modals
- 3D Secure modal

## Header
- **Merchant Logo**: Displayed prominently
- **Merchant Name**: Business name
- **Secure Payment Badge**: Security indicator

## Filters
None

## Search
None

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Pay Now | Submit payment | Form footer |
| Cancel | Cancel payment | Form footer |
| Card | Switch to card payment | Tab |
| Mobile Money | Switch to mobile money | Tab |
| Bank Transfer | Switch to bank transfer | Tab |

## Forms

### Card Payment Form
| Field | ID | Type | Placeholder |
|-------|-----|------|-------------|
| Card Number | `cardNumber` | text | "1234 5678 9012 3456" |
| Expiry Date | `expiryDate` | text | "MM/YY" |
| CVV | `cvv` | text | "123" |
| Cardholder Name | `cardholderName` | text | "John Doe" |

### Mobile Money Form
| Field | ID | Type | Placeholder |
|-------|-----|------|-------------|
| Phone Number | `phoneNumber` | tel | "+256 7XX XXX XXX" |
| Amount | `amount` | number | — |

### Bank Transfer Form
| Field | ID | Type | Placeholder |
|-------|-----|------|-------------|
| Bank Name | `bankName` | select | Select bank |
| Account Number | `accountNumber` | text | — |
| Amount | `amount` | number | — |

## Tables
None

## Action Buttons
| Button | Function |
|--------|----------|
| Pay Now | Process payment |
| Cancel | Return to merchant |
| Confirm | Confirm 3D Secure |
| Close | Close success/failed modal |

## Workflow
1. Customer receives payment link from merchant
2. Customer opens checkout page
3. Views order summary with amount
4. Selects payment method (Card, Mobile Money, Bank Transfer)
5. Fills in payment details
6. Clicks "Pay Now"
7. System processes payment
8. If 3D Secure required, modal appears
9. Customer completes verification
10. On success: confirmation modal with receipt
11. On failure: error modal with retry option
12. Customer can close or return to merchant

### Payment Methods

#### Card Payment
- Visa, Mastercard accepted
- Requires card number, expiry, CVV, cardholder name
- Supports 3D Secure verification

#### Mobile Money
- MTN Mobile Money
- Airtel Money
- Requires phone number and amount

#### Bank Transfer
- Stanbic Bank
- Requires bank selection and account details

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `checkout` | Checkout | Page title |
| `secure_payment` | Secure Payment | Badge text |
| `order_summary` | Order Summary | Section title |
| `payment_details` | Payment Details | Section title |
| `card_number` | Card Number | Field label |
| `expiry_date` | Expiry Date | Field label |
| `cvv` | CVV | Field label |
| `cardholder_name` | Cardholder Name | Field label |
| `phone_number` | Phone Number | Field label |
| `amount` | Amount | Field label |
| `bank_name` | Bank Name | Field label |
| `account_number` | Account Number | Field label |
| `pay_now` | Pay Now | Button text |
| `cancel` | Cancel | Button text |
| `mobile_money` | Mobile Money | Tab label |
| `bank_transfer` | Bank Transfer | Tab label |
| `card` | Card | Tab label |
| `payment_success` | Payment Successful | Modal title |
| `payment_failed` | Payment Failed | Modal title |
| `thank_you` | Thank you for your payment | Success message |
| `try_again` | Try Again | Button text |
| `back_to_merchant` | Back to Merchant | Button text |
| `mtn_mobile_money` | MTN Mobile Money | Provider |
| `airtel_money` | Airtel Money | Provider |
| `stanbic_bank` | Stanbic Bank | Provider |
| `select_bank` | Select bank | Placeholder |
| `processing` | Processing... | Loading text |

## Responsive Requirements

### Desktop (≥1024px)
- Centered payment card
- Side-by-side order summary and payment form
- Full-width payment methods

### Tablet (768px–1023px)
- Centered payment card
- Stacked layout
- Full-width form

### Mobile (<768px)
- Full-width payment card
- Stacked layout
- Touch-friendly inputs
- Large tap targets

## API Dependency
- **Payment API**: POST `/api/payments/process` — Process payment
- **3D Secure**: POST `/api/payments/3ds-verify` — Verify 3D Secure
- **Payment Status**: GET `/api/payments/:id/status` — Check payment status
- **Order Details**: GET `/api/orders/:id` — Get order information