# Payment Integration

## Purpose
Payment Integration manages the configuration of payment providers (MTN Mobile Money, Airtel Money, Vodafone Cash, Stanbic Bank, Card Gateway). It allows administrators to connect, configure, and test payment provider integrations. This is the core payment infrastructure management page.

## Components
- Page header with icon and title
- Statistics cards (4 metrics)
- Provider list data table
- Provider cards (visual display)
- Add/Edit Provider modal
- Test Connection modal
- Confirm Delete modal
- Business Rules section

## Header
- **Title**: "Payment Integration"
- **Subtitle**: "Manage payment provider connections"
- **Page Icon**: Blue background with plug icon

### Statistics Cards
| Card | ID | Description |
|------|-----|-------------|
| Total Providers | `totalProviders` | All configured providers |
| Active | `activeProviders` | Connected providers |
| Total Volume | `totalVolume` | Total transaction volume |
| Success Rate | `successRate` | Payment success rate |

### Provider Cards
| Provider | Type | Status |
|----------|------|--------|
| MTN Mobile Money | Mobile Money | Connected |
| Airtel Money | Mobile Money | Connected |
| Vodafone Cash | Mobile Money | Pending |
| Stanbic Bank | Bank | Connected |
| Card Gateway | Card | Active |

## Filters
| Filter | Type | Options |
|--------|------|---------|
| Status | select | All, Active, Inactive |
| Type | select | All, Mobile Money, Bank, Card |

## Search
- **Placeholder**: "Search providers..."
- **Searches**: Provider name, type

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Add Provider | Opens add provider modal | Action bar |
| Test Connection | Test provider connection | Action bar |
| Save | Save configuration | Action bar |
| Refresh | Reload provider list | Action bar |

## Forms

### Add/Edit Provider Modal
| Field | ID | Type | Required | Options |
|-------|-----|------|----------|---------|
| Provider Name | `providerName` | text | Yes | — |
| API Key | `apiKey` | text | Yes | — |
| Secret Key | `secretKey` | text | Yes | — |
| Webhook URL | `webhookUrl` | url | No | — |
| Status | `providerStatus` | select | No | Active, Inactive |
| Currency | `providerCurrency` | select | No | USD, UGX, NGN, KES, GHS |
| Environment | `providerEnv` | select | No | Sandbox, Production |

**Buttons**: Cancel, Save

### Test Connection Modal
**Title**: "Test Connection"
**Message**: "Testing connection to provider..."
**Result**: Success/Failure status
**Button**: Close

### Confirm Delete Modal
**Title**: "Confirm Delete"
**Message**: "Are you sure you want to delete this provider? This action cannot be undone."
**Buttons**: Cancel, Delete

## Tables

### Provider List Table
| Column | Description |
|--------|-------------|
| Provider | Provider name |
| Type | Provider type |
| Status | Connection status |
| Supported Currencies | Currency list |
| Fees | Transaction fees |
| Last Sync | Last synchronization time |
| Actions | Action buttons |

## Action Buttons

### Row Actions
| Button | Function | Icon |
|--------|----------|------|
| Edit | Edit provider configuration | Pencil |
| Test Connection | Test provider connection | Plug |
| Enable/Disable | Toggle provider status | Toggle |
| Delete | Remove provider | Trash |
| Regenerate Keys | Generate new API keys | Refresh |

## Workflow
1. Admin navigates to Payment Integration page
2. Views statistics cards showing provider counts
3. Views provider list with connection status
4. Can add new provider via modal
5. Fills in API credentials (key, secret)
6. Configures webhook URL and environment
7. Tests connection before saving
8. Can edit existing provider configurations
9. Can enable/disable providers
10. Can regenerate API keys
11. Can delete providers (with confirmation)
12. Can test connections at any time

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `payment_integration` | Payment Integration | Page title |
| `manage_payment_provider_connections` | Manage payment provider connections | Subtitle |
| `add_provider` | Add Provider | Button text |
| `test_connection` | Test Connection | Button text |
| `save` | Save | Button text |
| `refresh` | Refresh | Button text |
| `search_providers` | Search providers... | Placeholder |
| `total_providers` | Total Providers | Stat label |
| `active` | Active | Stat label |
| `total_volume` | Total Volume | Stat label |
| `success_rate` | Success Rate | Stat label |
| `provider_name` | Provider Name | Column/field |
| `api_key` | API Key | Field |
| `secret_key` | Secret Key | Field |
| `webhook_url` | Webhook URL | Field |
| `status` | Status | Column/filter |
| `currency` | Currency | Column/field |
| `environment` | Environment | Column/field |
| `supported_currencies` | Supported Currencies | Column |
| `fees` | Fees | Column |
| `last_sync` | Last Sync | Column |
| `actions` | Actions | Column |
| `edit` | Edit | Action |
| `enable_disable` | Enable/Disable | Action |
| `delete` | Delete | Action |
| `regenerate_keys` | Regenerate Keys | Action |
| `sandbox` | Sandbox | Environment |
| `production` | Production | Environment |
| `connected` | Connected | Status |
| `pending` | Pending | Status |
| `mtn_mobile_money` | MTN Mobile Money | Provider |
| `airtel_money` | Airtel Money | Provider |
| `vodafone_cash` | Vodafone Cash | Provider |
| `stanbic_bank` | Stanbic Bank | Provider |
| `card_gateway` | Card Gateway | Provider |
| `cancel` | Cancel | Button |
| `confirm_delete` | Confirm Delete | Modal title |
| `delete_confirmation` | Are you sure you want to delete this provider? | Modal message |

## Responsive Requirements

### Desktop (≥1024px)
- 4-column statistics grid
- Provider cards in 3-column grid
- Full-width data table

### Tablet (768px–1023px)
- 2-column statistics grid
- Provider cards in 2-column grid
- Horizontally scrollable table

### Mobile (<768px)
- 2-column statistics grid
- Single column provider cards
- Horizontally scrollable table

## API Dependency
- **Providers API**: GET `/api/providers` — List providers
- **Add Provider**: POST `/api/providers` — Add provider
- **Update Provider**: PUT `/api/providers/:id` — Update provider
- **Delete Provider**: DELETE `/api/providers/:id` — Delete provider
- **Test Connection**: POST `/api/providers/:id/test` — Test connection
- **Regenerate Keys**: POST `/api/providers/:id/regenerate` — Regenerate API keys