# Merchant Integration Center

## Purpose
Merchant Integration Center provides a comprehensive interface for merchants to manage their API integrations. It includes credential management, code generation, SDK downloads, API endpoint documentation, and URL configuration. This is the developer-facing portal for payment integration.

## Components
- Page header with title and action buttons
- Credentials section (API keys display)
- Package selection (Hosted, API, SDK)
- Integration code editor (CodeMirror)
- API endpoints documentation
- SDK downloads section
- URL configuration form
- Business Rules section

## Header
- **Title**: "Merchant Integration Center"
- **Subtitle**: "API integration and developer tools"
- **Top Buttons**: Generate API Key, Regenerate All Keys

## Filters
None

## Search
None

## Buttons
| Button | Action | Location |
|--------|--------|----------|
| Generate API Key | Generate new API credentials | Header |
| Regenerate All Keys | Regenerate all credentials | Header |
| Copy | Copy individual credential | Credentials |
| Copy All | Copy all credentials | Credentials |
| Generate Package | Generate integration package | Package section |
| Copy Code | Copy code to clipboard | Code editor |
| Reset Code | Reset code to default | Code editor |
| Generate Files | Generate SDK files | SDK section |
| Download SDK | Download SDK package | SDK section |
| Save Configuration | Save URL settings | URL config |
| Test Webhook | Test webhook endpoint | URL config |

## Forms

### Credentials Display
| Field | Format | Example |
|-------|--------|---------|
| Merchant ID | text | `MER-2024-001234` |
| Public Key | text | `pk_test_...` |
| API Key | text | `sk_live_...` |
| Webhook Secret | text | `whsec_...` |

### Package Selection
| Package | Description |
|---------|-------------|
| Hosted Checkout | Ready-to-use hosted payment page |
| API Only | API-only integration |
| SDK Integration | Full SDK with code examples |

### URL Configuration Form
| Field | ID | Type | Required |
|-------|-----|------|----------|
| Webhook URL | `webhookUrl` | url | Yes |
| Return URL | `returnUrl` | url | No |
| Cancel URL | `cancelUrl` | url | No |

## Tables

### API Endpoints (Collapsible Sections)
| Method | Endpoint | Description |
|--------|----------|-------------|
| POST | `/api/v1/payments/create` | Create payment |
| GET | `/api/v1/payments/:id` | Get payment status |
| POST | `/api/v1/payments/confirm` | Confirm payment |
| POST | `/api/v1/payments/refund` | Refund payment |
| GET | `/api/v1/transactions` | List transactions |
| GET | `/api/v1/transactions/:id` | Get transaction details |

## Action Buttons

### SDK Downloads
| SDK | Language | Download |
|-----|----------|----------|
| JavaScript SDK | JS | Download |
| PHP SDK | PHP | Download |
| Python SDK | Python | Download |
| Node.js SDK | Node.js | Download |
| Java SDK | Java | Download |

## Workflow
1. Admin/Merchant navigates to Integration Center
2. Views current API credentials
3. Can generate new API key or regenerate all
4. Selects integration package (Hosted, API, SDK)
5. Views/copies integration code
6. Reviews API endpoint documentation
7. Downloads appropriate SDK
8. Configures webhook and callback URLs
9. Tests webhook endpoint
10. Saves configuration

## Translation Requirements
| Key | English | Description |
|-----|---------|-------------|
| `merchant_integration_center` | Merchant Integration Center | Page title |
| `api_integration_developer_tools` | API integration and developer tools | Subtitle |
| `credentials` | Credentials | Section title |
| `merchant_id` | Merchant ID | Field label |
| `public_key` | Public Key | Field label |
| `api_key` | API Key | Field label |
| `webhook_secret` | Webhook Secret | Field label |
| `generate_api_key` | Generate API Key | Button text |
| `regenerate_all_keys` | Regenerate All Keys | Button text |
| `copy` | Copy | Button text |
| `copy_all` | Copy All | Button text |
| `select_package` | Select Package | Section title |
| `hosted_checkout` | Hosted Checkout | Package option |
| `api_only` | API Only | Package option |
| `sdk_integration` | SDK Integration | Package option |
| `generate_package` | Generate Package | Button text |
| `integration_code` | Integration Code | Section title |
| `copy_code` | Copy Code | Button text |
| `reset_code` | Reset Code | Button text |
| `api_endpoints` | API Endpoints | Section title |
| `sdk_downloads` | SDK Downloads | Section title |
| `javascript_sdk` | JavaScript SDK | Download option |
| `php_sdk` | PHP SDK | Download option |
| `python_sdk` | Python SDK | Download option |
| `nodejs_sdk` | Node.js SDK | Download option |
| `java_sdk` | Java SDK | Download option |
| `download` | Download | Button text |
| `url_configuration` | URL Configuration | Section title |
| `webhook_url` | Webhook URL | Field label |
| `return_url` | Return URL | Field label |
| `cancel_url` | Cancel URL | Field label |
| `save_configuration` | Save Configuration | Button text |
| `test_webhook` | Test Webhook | Button text |
| `sandbox` | Sandbox | Environment |
| `production` | Production | Environment |

## Responsive Requirements

### Desktop (≥1024px)
- Side-by-side credentials and package selection
- Full-width code editor
- Multi-column SDK downloads

### Tablet (768px–1023px)
- Stacked credentials and package
- Full-width code editor
- 2-column SDK downloads

### Mobile (<768px)
- Full-width stacked layout
- Full-width code editor
- Single column SDK downloads

## API Dependency
- **Credentials API**: GET `/api/merchant/credentials` — Get API credentials
- **Generate Key**: POST `/api/merchant/credentials/generate` — Generate new key
- **Regenerate Keys**: POST `/api/merchant/credentials/regenerate` — Regenerate all
- **SDK Download**: GET `/api/merchant/sdk/:language` — Download SDK
- **Test Webhook**: POST `/api/merchant/webhook/test` — Test webhook
- **Save Config**: PUT `/api/merchant/config` — Save URL configuration