Éditer payment/illico_otp.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Confirmation OTP - IllicoCash</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;
        }

.otp-input {
            width: 45px;
            height: 55px;
            text-align: center;
            font-size: 24px;
            margin: 0 5px;
        }

.otp-wrapper {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
        }

@media (max-width: 576px) {
            .otp-input {
                width: 40px;
                height: 50px;
                font-size: 20px;
                margin: 0 3px;
            }
        }

.card {
            border-radius: 12px;
        }

.card-header {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

.card-footer {
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
        }
    </style>

inputs.forEach((input, index) => {
                input.addEventListener('input', () => {
                    input.value = input.value.replace(/[^0-9]/g, '');
                    if (input.value.length === 1 && index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                    updateHiddenOtp();
                });

input.addEventListener('keydown', (e) => {
                    if (e.key === 'Backspace' && !input.value && index > 0) {
                        inputs[index - 1].focus();
                    }
                });
            });

function updateHiddenOtp() {
                hiddenInput.value = Array.from(inputs).map(input => input.value).join('');
            }

form.addEventListener('submit', function () {
                updateHiddenOtp();
                submitBtn.disabled = true;
                spinner.style.display = 'inline-block';
                submitBtn.innerText = ' Vérification...';
            });
        });
    </script>
</head>
<body>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-12 col-sm-10 col-md-8 col-lg-5">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0">🔐 Confirmation du paiement</h4>
                </div>
                <div class="card-body">
                    <form id="otpForm" method="POST" action="<?= base_url('payment/illico/confirm') ?>">
                        <input type="hidden" name="refnum" value="<?= esc($reference) ?>">
                        <input type="hidden" name="phone" value="<?= esc($phone) ?>">
                        <input type="hidden" name="otp" id="otp-hidden">

<div class="mb-4 text-center">
                            <label class="form-label mb-2">📩 Entrez le code OTP reçu</label>
                            <div class="otp-wrapper">
                                <?php for ($i = 0; $i < 6; $i++): ?>
                                    <input type="text" maxlength="1" class="form-control otp-input" required>
                                <?php endfor; ?>
                            </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>
                            Confirmer
                        </button>
                    </form>
                </div>
                <div class="card-footer text-muted text-center small">
                    Un code OTP vous a été envoyé par SMS via IllicoCash.
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

Annuler

Dashboard

Éditer payment/illico_otp.php

Switcher