English
Spanish
French
0
Notifications
0 Non lues
Aucune notification
Voir toutes
Aucune nouvelle notification
Raccourcis
Tableau de bord
Profil
Paramètres
Voir toutes les apps
Utilisateur
Utilisateur
Profil
Messages
25
Paramètres
Solde
$47.12
Support
Se déconnecter
Dashboard
Dashboard
É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"> <!-- Bootstrap CSS --> <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"> <!-- Affichage du montant total --> <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"> <!-- Champs cachés pour token, devise et montant --> <input type="hidden" name="token" value="<?= esc($token) ?>"> <input type="hidden" name="currency" value="USD"> <input type="hidden" name="amount" value="<?= esc($montantTotal) ?>"> <!-- Sélection du mode de paiement --> <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> <!-- Champs pour IllicoCash --> <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> <!-- Champs pour FlexPay --> <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> <!-- Formulaire de paiement par carte --> <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> <!-- Scripts --> <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
Enregistrer
Switcher
Theme Styles
Theme Colors
Theme Color Mode:
Light
Dark
Menu Colors: