Éditer payment/restaurant_payment.php

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Paiement de la commande</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background: #f8f9fa;
    }
    .card {
      border-radius: 12px;
    }
    .card-header {
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
    }
    .form-label {
      font-weight: 500;
    }
    @media (max-width: 576px) {
      h2 {
        font-size: 1.5rem;
      }
    }
  </style>
</head>
<body>
  <div class="container py-5">
    
    <div class="text-center mb-4">
      <h2 class="fw-bold text-success">
        💰 Total à payer : <?= esc($montantTotal) ?> USD
      </h2>
    </div>
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-6">
        <div class="card shadow-sm">
          <div class="card-header bg-primary text-white text-center">
            <h4 class="mb-0">💳 Paiement de votre commande</h4>
          </div>
          <div class="card-body">
            <form method="post" action="<?= base_url('whatsapp/payment/process') ?>" id="payment-form">
              
              <input type="hidden" name="token" value="<?= esc($token) ?>">
              <input type="hidden" name="currency" value="USD">
              <input type="hidden" name="amount" value="<?= esc($montantTotal) ?>">
              
              
              <div class="mb-3">
                <label for="mode" class="form-label">🧾 Mode de paiement</label>
                <select name="mode" id="mode" class="form-select" required>
                  <option value="">-- Sélectionnez --</option>
                  <option value="illico">IllicoCash</option>
                  <option value="flexpay">Mobile Money</option>
                  <option value="visa">Carte Visa / Mastercard</option>
                </select>
              </div>
              
              
              <div class="mb-3" id="phone-illico" style="display:none;">
                <label class="form-label">📱 Numéro IllicoCash</label>
                <input type="text" name="phone_illico" class="form-control" placeholder="Ex: 099xxxxxxx">
              </div>
              
              
              <div class="mb-3" id="phone-flexpay" style="display:none;">
                <label class="form-label">📱 Numéro Mobile Money</label>
                <input type="text" name="phone_flexpay" class="form-control" placeholder="Ex: 243xxxxxxxxx">
              </div>
              
              
              <div id="card-form" style="display:none;">
                <div class="mb-3">
                  <label class="form-label">💳 Numéro de carte</label>
                  <input type="text" name="card_number" class="form-control" placeholder="1234 5678 9012 3456">
                </div>
                <div class="mb-3">
                  <label class="form-label">📅 Date d'expiration</label>
                  <input type="text" name="card_expiry" class="form-control" placeholder="MM/AA" maxlength="5" id="expiry-input">
                </div>
                <div class="mb-3">
                  <label class="form-label">🔐 CVC</label>
                  <input type="text" name="card_cvc" class="form-control" placeholder="123">
                </div>
              </div>
              
              <button type="submit" class="btn btn-success w-100" id="submit-btn">
                <span id="submit-spinner" class="spinner-border spinner-border-sm me-2" style="display: none;"></span>
                Continuer le paiement
              </button>
            </form>
          </div>
          <div class="card-footer text-muted text-center small">
            Votre transaction est 100% sécurisée.
          </div>
        </div>
      </div>
    </div>
  </div>

<script>
    // Fonction pour afficher/masquer les champs en fonction du mode sélectionné
    function togglePaymentFields() {
      const mode = document.getElementById('mode').value;
      document.getElementById('phone-illico').style.display = 'none';
      document.getElementById('phone-flexpay').style.display = 'none';
      document.getElementById('card-form').style.display = 'none';
      
      if (mode === 'illico') {
        document.getElementById('phone-illico').style.display = 'block';
      } else if (mode === 'flexpay') {
        document.getElementById('phone-flexpay').style.display = 'block';
      } else if (mode === 'visa') {
        document.getElementById('card-form').style.display = 'block';
      }
    }

document.addEventListener('DOMContentLoaded', function () {
      togglePaymentFields();
      document.getElementById('mode').addEventListener('change', togglePaymentFields);

// Formatage automatique de la date d'expiration en MM/AA
      const expiryInput = document.querySelector('input[name="card_expiry"]');
      if (expiryInput) {
        expiryInput.addEventListener('input', function (e) {
          let value = e.target.value.replace(/[^\d]/g, ''); // Ne garder que les chiffres
          if (value.length >= 3) {
            value = value.slice(0, 2) + '/' + value.slice(2, 4);
          }
          e.target.value = value.slice(0, 5); // Limiter à 5 caractères
        });
      }

// Gestion de la soumission du formulaire
      const form = document.getElementById('payment-form');
      const submitBtn = document.getElementById('submit-btn');
      const spinner = document.getElementById('submit-spinner');

form.addEventListener('submit', function (e) {
        const mode = document.getElementById('mode').value;
        
        // Pour IllicoCash, rediriger immédiatement vers une page de récapitulatif
        if (mode === 'illico') {
          e.preventDefault();
          const phone = document.querySelector('input[name="phone_illico"]').value;
          const token = document.querySelector('input[name="token"]').value;
          const amount = document.querySelector('input[name="amount"]').value;
          if (!phone) {
            alert("Veuillez entrer un numéro IllicoCash.");
            return;
          }
          const params = new URLSearchParams({
            phone: phone,
            token: token,
            amount: amount
          });
          window.location.href = '<?= base_url('payment/illico-recap') ?>?' + params.toString();
          return;
        }
        
        // Afficher le spinner sur le bouton de soumission
        submitBtn.disabled = true;
        spinner.style.display = 'inline-block';
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Paiement en cours...';
      });
    });
  </script>
</body>
</html>

Annuler

Dashboard

Éditer payment/restaurant_payment.php

Switcher