Éditer payment/flexpay_form.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Paiement FlexPay - Confirmation</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;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            background-color: #ffc107;
        }
        .form-label {
            font-weight: 500;
        }
        .form-control:focus {
            border-color: #ffc107;
            box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25);
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .invalid-feedback {
            display: none;
            color: #dc3545;
            font-size: 80%;
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card">
                    <div class="card-header text-dark">
                        <h4 class="mb-0 text-center">⚠️ Vérification du paiement</h4>
                    </div>
                    <div class="card-body">
                        <p class="text-center mb-4">
                            Vous êtes sur le point de payer 
                            <strong><?= number_format(esc($amount), 2) ?> <?= esc($currency) ?></strong> via FlexPay.
                        </p>

<form method="post" action="<?= base_url('payment/flexpay/initiate') ?>" id="payment-form">
                            <input type="hidden" name="token" value="<?= esc($token ?? '') ?>">
                            <input type="hidden" name="amount" value="<?= esc($amount ?? '') ?>">
                            <input type="hidden" name="currency" value="<?= esc($currency ?? 'USD') ?>">

<div class="mb-3">
                                <label class="form-label">📱 Numéro Mobile Money</label>
                                <input type="tel" 
                                       name="phone" 
                                       class="form-control" 
                                       value="<?= esc($phone ?? '') ?>"
                                       pattern="^243[0-9]{9}$"
                                       required
                                       placeholder="243xxxxxxxxx">
                                <div class="invalid-feedback">
                                    Veuillez entrer un numéro valide (format: 243xxxxxxxxx)
                                </div>
                            </div>

<button type="submit" class="btn btn-primary w-100" id="submit-btn">
                                <span class="spinner-border spinner-border-sm me-2 d-none" id="spinner"></span>
                                <span id="btn-text">Confirmer le paiement</span>
                            </button>
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>

form.addEventListener('submit', function(e) {
            e.preventDefault();

const phone = form.querySelector('input[name="phone"]');
            const token = form.querySelector('input[name="token"]').value;
            const amount = form.querySelector('input[name="amount"]').value;

if (!phone.checkValidity()) {
                phone.classList.add('is-invalid');
                return;
            }

submitBtn.disabled = true;
            spinner.classList.remove('d-none');
            btnText.textContent = 'Traitement en cours...';

// Envoi des données via AJAX
            fetch(form.action, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    token: token,
                    phone: phone.value,
                    amount: amount
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status) {
                    // On redirige directement vers une page de confirmation ou on initialise un polling
                    // Exemple simple : redirection vers une page de confirmation
                    window.location.href = data.redirect || '/payment/confirmation';
                } else {
                    alert(data.message || 'Une erreur est survenue');
                    submitBtn.disabled = false;
                    spinner.classList.add('d-none');
                    btnText.textContent = 'Confirmer le paiement';
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                alert('Une erreur est survenue');
                submitBtn.disabled = false;
                spinner.classList.add('d-none');
                btnText.textContent = 'Confirmer le paiement';
            });
        });

form.querySelector('input[name="phone"]').addEventListener('input', function(e) {
            e.target.classList.remove('is-invalid');
        });
    });
    </script>
</body>
</html>

Annuler

Dashboard

Éditer payment/flexpay_form.php

Switcher