🧪

Test Cases AxisPayment

Simulation du Frontend Gateway

Backend API localhost:4001
HTML/JS React
📊

Tests Fonctionnels du Gateway Axis

Simulation complète du flux de paiement depuis la redirection frontend

Ces tests simulent le comportement réel du frontend AxisPayment Gateway :

🛒

Marchand initie

POST /api/v1/init-payment avec HMAC → obtient token

↓
🔄

Redirection client

Vers /pay?token=xxx (ces démos)

↓
✅

Validation token

GET /api/v1/payment/validate/:token

↓
📝

Saisie paiement

Numéro + opérateur mobile money

↓
🚀

Soumission

POST /api/v1/submit-payment

↓
📡

Surveillance

Polling du statut jusqu'à confirmation

🔗 État du Système

🔄 Actualiser
🖥️
Backend API: Vérification...
🗄️
Base de données: Vérification...
⚡
Cache Redis: Vérification...
⚡

Technologies de Test

Deux approches pour tester le Gateway AxisPayment

🌐

HTML/JavaScript

Tests traditionnels avec JavaScript vanilla

Principal

Caractéristiques :

  • ✅ Fichiers statiques HTML/CSS/JS
  • ✅ Simulation du comportement marchand
  • ✅ Tests directs des APIs
  • ✅ Interface merchant-page.html
🛒 Boutique Démo
OU
⚛️

React Application

Interface moderne avec React/TypeScript

En développement

Avantages :

  • 🚀 Interface moderne et responsive
  • 🔧 Gestion d'état avec Redux
  • 📱 Composants réutilisables
  • 🧪 Tests unitaires avancés
📁 Voir le code

Comparaison des Approches

Fonctionnalité
HTML/JS
React
Rapidité de développement
⚡ Très rapide
🔧 Modérée
Maintenabilité
🔧 Moyenne
✅ Excellente
Tests automatisés
📝 Basiques
🧪 Avancés
Expérience utilisateur
✅ Bonne
🚀 Excellente
🔄

Parcours Utilisateur Réel

Flux complet de paiement Axis comme en production

1
🛒

Page Marchand

Le client est sur le site marchand avec son panier

🛒 Aller à la boutique démo

Simule une vraie page e-commerce avec bouton "Payer avec Axis"

↓
2
🖱️

Clic "Payer avec Axis"

Le marchand appelle init-payment et redirige vers Axis

JavaScript - Côté Marchand 
// Initialisation du paiement
const result = await axisApi.initPayment({
  orderId: "CMD-001",
  amount: 15000,
  currency: "MGA"
});

// Redirection automatique
window.location.href = result.redirect_url;

Initialisation HMAC + redirection vers localhost:4000

↓
3
🌐

Gateway Axis

Page de paiement Axis avec validation token et formulaire

🔐 Validation token sécurisée
📱 Formulaire mobile money
🔄 Polling en temps réel

Résumé du Flux

🛒
Marchand
Clic "Payer avec Axis"
→
🔒
Init Payment
HMAC + Token
→
📱
Gateway Axis
localhost:4000
→
✅
Succès/Erreur
Confirmation
🚀

Démarrage Rapide

Tester le flux complet en 3 étapes

1
⚙️

Démarrer le Backend

Assurez-vous que l'API Axis fonctionne

Terminal 
cd backend
npm run dev
✅ Backend sur http://localhost:4001
2
🛒

Aller à la Boutique

Simulez un vrai site marchand

🛒 Ouvrir la boutique démo

Page avec panier et bouton "Payer avec Axis"

3
💳

Tester le Paiement

Cliquez sur "Payer avec Axis" et suivez le flux

Options de test disponibles :

  • ✅ Paiement réussi (utilisez un numéro valide)
  • ❌ Erreur (arrêtez le backend d'abord)
  • ⏰ Timeout (attendez 3+ minutes)

Ce que vous allez observer

🔐 Génération signature HMAC
🎫 Création token éphémère
🔄 Redirection automatique
📝 Validation et formulaire
📊 Surveillance du statut
✅ Page de confirmation
🎯

Scénarios de Test Fonctionnels

Tests du flux complet marchand → gateway → résultat

🎯 Flux Complet Réussi

Test Principal
1 Clic "Payer avec Axis" sur merchant-page.html
2 Initialisation HMAC → Redirection auto vers gateway
3 Saisie mobile money → Soumission paiement
4 Surveillance statut → Redirection vers succès
✅
Résultat
Redirection vers payment-success.html

❌ Erreur d'Initialisation

Test d'Erreur
Cause : Backend hors ligne ou clés HMAC invalides
Symptôme : Erreur lors du clic bouton marchand
Test : Arrêter le backend et cliquer sur "Payer avec Axis"

⏰ Token Expiré

Test Timeout
Cause : Délai > 3 minutes entre init et soumission
Test : Init paiement, attendre 3+ min, soumettre
Résultat : Erreur 410 token expiré

📱 Validation Formulaire

Test Validation
Tests : Numéros invalides, montants négatifs, etc.
Comportement : Validation côté client + serveur
UX : Messages d'erreur explicites en temps réel

Configuration de Test

🖥️
Backend API
http://localhost:4001
Démarrer avec npm run dev
🆔
Marchand ID
550e8400-e29b-41d4-a716-446655440000
UUID de test
✅
Données valides
Numéros: +261341234567
Montants: 15000 Ar
🔌

Architecture API Axis

Séparation marchand/frontend pour sécurité maximale

🔐 Côté Marchand (Serveur)

Serveur uniquement
POST
/api/v1/init-payment
Initialisation sécurisée avec HMAC-SHA256
🔒 Appelé depuis le serveur marchand avec clés API secrètes
VERSUS

🌐 Côté Frontend (Navigateur)

Client public
GET
/api/v1/payment/validate/:token
Validation token et récupération données
POST
/api/v1/submit-payment
Soumission infos mobile money
GET
/api/v1/payment/status/:token
Polling du statut de paiement
🌐 Appelé depuis le navigateur client (pas de clés secrètes)

Sécurité par Architecture

🛡️

Clés secrètes

Jamais exposées côté client

🎫

Tokens éphémères

Valides 3 minutes seulement

🔐

HMAC marchand

Signature côté serveur uniquement

⚡

Rate limiting

Protection anti-abus différenciée

🔄

Anti-replay

Nonces stockés pour prévention

✅

Validation stricte

Serveur + client