paiement

Flux détaillé du paiement dans le code

1. Création de commande

// Frontend
const response = await fetch('/api/commandes', {
  method: 'POST',
  body: JSON.stringify({
    clientId: 123,
    articles: [...],
    montantTotalCents: 1550,
    adresseLivraison: {...},
    clientInfo: {...}
  })
});

const { ordreId } = await response.json();

2. Génération de l'URL de paiement

// Frontend
const paymentResponse = await fetch('/api/paiement/generer-url', {
  method: 'POST',
  body: JSON.stringify({
    orderId: ordreId,
    amount: "15.50",
    currency: "EUR",
    client: {...},
    returnUrl: `${window.location.origin}/payment-return`
  })
});

const { paymentUrl } = await paymentResponse.json();
window.location.href = paymentUrl; // Redirection vers le fournisseur

3. Callback du fournisseur

Le fournisseur redirige l'utilisateur vers l'URL de retour avec les paramètres :

https://e-commerce.staging.ubsi.fr/payment-return?
  orderId=ORD-20241113-001&
  status=accepte&
  amount=15.50&
  message=Paiement+accepté&
  authorizationId=CFM-20241113-154349-29318

4. Confirmation du paiement (Frontend)

// PaymentReturnPage.tsx
const authorizationId = searchParams.get('authorizationId');
const status = searchParams.get('status');

if (status === 'accepte') {
  await fetch(`/api/commandes/${orderId}/confirmer-paiement`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      transactionId,
      authorizationId,
      amount: paymentAmount,
    }),
  });
}

5. Traitement backend

// commandes.service.ts
async confirmerPaiement(
  ordreId: string,
  transactionId?: string,
  authorizationId?: string,
) {
  // 1. Mettre à jour le statut et enregistrer les IDs
  await this.updateCommandeStatut(ordreId, {
    statut: 'EN_ATTENTE',
    dateConfirmation: new Date(),
    transactionId: transactionId || null,
    authorizationId: authorizationId || null,
  });

  // 2. Envoyer vers la logistique
  await this.envoyerVersLogistique(
    commande,
    clientFideliseId,
    transactionId,
    authorizationId
  );

  // 3. Envoyer vers la fidélité
  await this.envoyerVersFidelite(commande, clientFideliseId);
}

6. Message RabbitMQ vers la logistique

{
  "action": "CREER_COMMANDE",
  "payload": {
    "ordreId": "ORD-20241113-001",
    "clientId": "FIDELITE-123",
    "articles": [
      {
        "produitId": 1,
        "nom": "Produit A",
        "quantite": 2,
        "prixUnitaireCents": 775
      }
    ],
    "montantTotalCents": 1550,
    "dateCommande": "2024-11-13T15:43:00Z",
    "adresseLivraison": {
      "nom": "Jean Dupont",
      "rue": "123 Rue de la Paix",
      "codePostal": "75001",
      "ville": "Paris",
      "pays": "France"
    },
    "paiement": {
      "transactionId": "TXN-20241113-154349-12345",
      "authorizationId": "CFM-20241113-154349-29318"
    }
  }
}

Queue : logistique.ordre-preparation

Affichage Frontend

Page de retour paiement

La page PaymentReturnPage.tsx gère 4 états :

1. Processing : Traitement de la confirmation en cours

   <div className="processing-state">
     <div className="spinner"></div>
     <h2>Traitement de votre paiement...</h2>
   </div>

2. Success : Paiement confirmé

   <div className="success-state">
     <div className="success-icon">✓</div>
     <h2>Paiement confirmé !</h2>
     <p>
       N° d'autorisation : <strong>{authorizationId}</strong>
     </p>
   </div>

3. Pending : Paiement en attente de validation

   <div className="pending-state">
     <div className="pending-icon">⏳</div>
     <h2>Paiement en attente</h2>
   </div>

4. Error : Échec du paiement

   <div className="error-state">
     <div className="error-icon">✗</div>
     <h2>Paiement refusé</h2>
   </div>

Page de récapitulatif de commande

La page OrderConfirmationPage.tsx affiche les informations de paiement :

<div className="success-header">
  <div className="success-icon">✓</div>
  <h1>Merci pour votre commande !</h1>
  <p className="order-number">
    Commande N° <strong>{commande.ordreId}</strong>
  </p>
  {commande.authorizationId && (
    <p className="authorization-number">
      N° d'autorisation : <strong>{commande.authorizationId}</strong>
    </p>
  )}
</div>

Gestion des erreurs

Cas d'erreur possibles

1. Commande introuvable (404)

   {
     "statusCode": 404,
     "message": "Commande ORD-123 introuvable"
   }

2. Statut invalide (400)

   {
     "statusCode": 400,
     "message": "La commande n'est pas en attente de paiement (statut actuel: EN_ATTENTE)"
   }

3. Erreur fournisseur de paiement (500)

   {
     "statusCode": 500,
     "message": "Erreur lors de la génération de l'URL de paiement"
   }

Logs

Le système génère des logs détaillés à chaque étape :

[confirmerPaiement] Démarrage pour commande ORD-20241113-001
[confirmerPaiement] Authorization ID: CFM-20241113-154349-29318
[updateCommandeStatut] Mise à jour statut pour commande ORD-20241113-001
[updateCommandeStatut] Updates: {"statut":"EN_ATTENTE","transactionId":"TXN-...","authorizationId":"CFM-..."}
[updateCommandeStatut] Statut mis à jour avec transactionId=TXN-... et authorizationId=CFM-...
[envoyerVersLogistique] Publication commande ORD-20241113-001
[envoyerVersLogistique] Commande ORD-20241113-001 envoyée avec succès
[confirmerPaiement] Commande ORD-20241113-001 traitée avec succès