# Guide de Test - Intégration CinetPay
## 📋 Prérequis
Avant de tester l'intégration CinetPay, vous devez :
1. **Obtenir vos identifiants CinetPay** :
- Créer un compte sur [CinetPay](https://cinetpay.com)
- Récupérer votre `APIKEY` et `SITE_ID` depuis votre tableau de bord
- Utiliser les identifiants de test pour l'environnement de développement
2. **Configurer les variables d'environnement** :
```bash
# Dans app_transport_front/.env
VITE_CINETPAY_APIKEY=votre_apikey_de_test
VITE_CINETPAY_SITE_ID=votre_site_id_de_test
```
## 🚀 Architecture Implémentée
### Frontend
- **Service CinetPay** : `src/services/CinetPayService.ts`
- **Types TypeScript** : `src/types/cinetpay.ts`
- **Composant de réservation** : `src/components/ReservationWorkflowModal.vue`
- **Page de succès** : `src/views/PaymentSuccessView.vue`
### Backend
- **Webhook CinetPay** : `src/presentation/controllers/payment.controller.ts`
- **Endpoint** : `POST /api/payments/cinetpay/webhook`
## đź§Ş Comment Tester
### 1. Test en Mode Développement (Simulation)
1. **Démarrer les serveurs** :
```bash
# Frontend
cd app_transport_front
npm run dev
# Backend
cd node_app
npm run start:dev
```
2. **Accéder à l'application** :
- Ouvrir http://localhost:5173
- Naviguer vers une page de réservation
- Remplir le formulaire de réservation
3. **Processus de test** :
- Le système collecte les données sans créer d'entités
- Au moment du paiement, CinetPay génère une URL de paiement
- En mode DEV, le paiement est simulé automatiquement
- Les entités (utilisateur + réservations) sont créées après "paiement" réussi
### 2. Test avec CinetPay Réel
1. **Configurer les vraies clés** :
```bash
VITE_CINETPAY_APIKEY=votre_vraie_apikey
VITE_CINETPAY_SITE_ID=votre_vrai_site_id
```
2. **Modifier le mode de test** :
Dans `ReservationWorkflowModal.vue`, commenter la simulation :
```typescript
// En production, rediriger vers l'URL de paiement CinetPay
window.location.href = result.data.payment_url
```
3. **Tester le workflow complet** :
- Remplir le formulaire de réservation
- Cliquer sur "Payer"
- Être redirigé vers CinetPay
- Effectuer le paiement test
- Être redirigé vers la page de succès
## đź”§ Configuration CinetPay selon la Documentation
### Paramètres Obligatoires 0
- `apikey` : Votre clé API CinetPay
- `site_id` : Votre identifiant de site
- `transaction_id` : ID unique de transaction (généré automatiquement)
- `amount` : Montant (multiple de 5)
- `currency` : Devise (XOF, XAF, CDF, GNF, USD)
- `description` : Description du paiement
- `notify_url` : URL de notification webhook
- `return_url` : URL de retour après paiement
- `channels` : Canaux de paiement (ALL, MOBILE_MONEY, CREDIT_CARD, WALLET)
### Données Client (Obligatoires pour Cartes Bancaires) 0
- `customer_name` : Nom du client
- `customer_surname` : Prénom du client
- `customer_email` : Email du client
- `customer_phone_number` : Téléphone du client
- `customer_address` : Adresse du client
- `customer_city` : Ville du client
- `customer_country` : Code pays (ex: CI, TG, SN)
- `customer_state` : État/région
- `customer_zip_code` : Code postal
## 📱 Canaux de Paiement Supportés
- **ALL** : Tous les canaux disponibles
- **MOBILE_MONEY** : Paiement mobile (Orange Money, MTN Money, etc.)
- **CREDIT_CARD** : Cartes bancaires
- **WALLET** : Portefeuilles électroniques
## 🔄 Workflow de Paiement Optimisé
1. **Collecte des données** : Formulaire multi-étapes sans création d'entités
2. **Génération du paiement** : Appel API CinetPay avec toutes les données
3. **Redirection** : Vers l'interface de paiement CinetPay
4. **Notification webhook** : CinetPay notifie le succès/échec
5. **Création des entités** : Seulement après confirmation de paiement
6. **Redirection de retour** : Vers la page de succès
## 🚨 Points d'Attention
1. **Sécurité** :
- Ne jamais exposer les clés API dans le code frontend
- Valider les webhooks côté serveur
- Vérifier les signatures des notifications
2. **Gestion d'erreurs** :
- Gérer les échecs de paiement
- Prévoir les timeouts
- Logger toutes les transactions
3. **Tests** :
- Utiliser les identifiants de test CinetPay
- Tester tous les canaux de paiement
- Vérifier les webhooks en local avec ngrok si nécessaire
## 📞 Support
- **Documentation CinetPay** : https://docs.cinetpay.com
- **Support technique** : support@cinetpay.com
- **Environnement de test** : Utiliser les clés de test fournies par CinetPay
## âś… Checklist de Test
- [ ] Variables d'environnement configurées
- [ ] Serveurs frontend et backend démarrés
- [ ] Formulaire de réservation fonctionnel
- [ ] Génération d'URL de paiement CinetPay
- [ ] Simulation de paiement en mode DEV
- [ ] Création des entités après paiement
- [ ] Page de succès accessible
- [ ] Webhook backend fonctionnel
- [ ] Gestion des erreurs de paiement
- [ ] Test avec vrais identifiants CinetPay (optionnel)