# Hosted Payment Page

## Purpose
Hosted Payment Page provides a preview and configuration interface for the merchant-facing payment checkout experience. It allows administrators to view how the payment page appears to end users, configure page settings, and access related integration tools.

## Components
- Page header with title and action buttons
- Phone preview section (simulated mobile view)
- Page Configuration card
- Quick Actions section (link cards)
- Recent Activity table
- Business Rules section

## Header
- **Title**: "Hosted Payment Page"
- **Subtitle**: "Preview of the merchant-facing payment checkout experience"
- **Top Buttons**: Open Preview, Back to Integration Center

## Filters
None

## Search
None

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Open Preview | Opens payment page preview | Header |
| Back to Integration Center | Navigate to integration center | Header |
| Edit Configuration | Edit page settings | Configuration card |
| Confirm Payment | Submit payment (in preview) | Phone preview |

## Forms

### Page Configuration (Read-only Display)
| Field | Value |
|-------|-------|
| Page URL | `https://checkout.paygate.com/MER-2024-001234` |
| Status | Active |
| Environment | Production |
| Last Updated | 2024-01-15 14:30:00 |
| Total Transactions | 1,247 |
| Success Rate | 98.5% |

## Tables

### Recent Activity Table
| Column | Description |
|--------|-------------|
| ID | Transaction identifier |
| Amount | Transaction amount |
| Status | Transaction status |
| Time | Time since transaction |

## Action Buttons

### Quick Actions
| Button | Description | Link |
|--------|-------------|------|
| View Checkout Counter | Go to live checkout | `checkout-counter.html` |
| Integration Center | Setup & configure | `merchant-integration-center.html` |
| Transaction Orders | View all transactions | `transaction-orders.html` |
| Support Center | Get help & support | `support.html` |

## Phone Preview Content

### Payment Form (Simulated)
| Section | Options |
|---------|---------|
| Merchant Logo | Acme Corporation |
| Description | "Secure payment checkout" |
| Select Operator | MTN (Mobile Money), Airtel (Mobile Money) |
| Select Amount | 5,000 UGX, 10,000 UGX, 25,000 UGX, 50,000 UGX, 100,000 UGX, Custom |
| Phone Number | +256 7XX XXX XXX |
| Button | Confirm Payment |
| Footer | Powered by PayGate |

## Workflow
1. Admin navigates to Hosted Payment Page
2. Views phone preview of the checkout experience
3. Reviews page configuration settings
4. Can edit configuration (URLs, theme, etc.)
5. Can access quick actions to related pages
6. Reviews recent transaction activity
7. Can open full preview in new tab

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `hosted_payment_page` | Hosted Payment Page | Page title |
| `preview_merchant_checkout` | Preview of the merchant-facing payment checkout experience | Subtitle |
| `open_preview` | Open Preview | Button text |
| `back_to_integration_center` | Back to Integration Center | Button text |
| `payment_page_preview` | Payment Page Preview | Section title |
| `live_preview_hosted_checkout` | Live preview of the hosted checkout experience | Section subtitle |
| `page_configuration` | Page Configuration | Section title |
| `current_hosted_page_settings` | Current hosted page settings | Section subtitle |
| `page_url` | Page URL | Config label |
| `status` | Status | Config label |
| `environment` | Environment | Config label |
| `last_updated` | Last Updated | Config label |
| `total_transactions` | Total Transactions | Config label |
| `success_rate` | Success Rate | Config label |
| `edit_configuration` | Edit Configuration | Button text |
| `quick_actions` | Quick Actions | Section title |
| `common_actions_hosted_page` | Common actions for the hosted payment page | Section subtitle |
| `view_checkout_counter` | View Checkout Counter | Action title |
| `go_to_live_checkout` | Go to live checkout | Action description |
| `integration_center` | Integration Center | Action title |
| `setup_configure` | Setup & configure | Action description |
| `transaction_orders` | Transaction Orders | Action title |
| `view_all_transactions` | View all transactions | Action description |
| `support_center` | Support Center | Action title |
| `get_help_support` | Get help & support | Action description |
| `recent_activity` | Recent Activity | Section title |
| `latest_transactions_hosted` | Latest transactions on the hosted payment page | Section subtitle |
| `select_operator` | Select operator | Preview label |
| `select_amount` | Select amount | Preview label |
| `phone_number` | Phone number | Preview label |
| `confirm_payment` | Confirm Payment | Preview button |
| `powered_by_paygate` | Powered by PayGate | Footer |
| `active` | Active | Status |
| `production` | Production | Environment |
| `custom` | Custom | Amount option |

## Responsive Requirements

### Desktop (≥1024px)
- Side-by-side layout: phone preview (left) + configuration (right)
- Quick actions in 2-column grid
- Full-width recent activity table

### Tablet (768px–1023px)
- Stacked layout: phone preview on top
- Configuration below
- Quick actions in 2-column grid

### Mobile (<768px)
- Stacked layout
- Full-width phone preview
- Single column quick actions

## API Dependency
- **Hosted Page API**: GET `/api/hosted-page/config` — Get page configuration
- **Update Config**: PUT `/api/hosted-page/config` — Update page settings
- **Recent Activity**: GET `/api/hosted-page/activity` — Get recent transactions