Payment Gateway Form - Copy this Html, Bootstrap Component to your project
make it more visual <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Payment Screen</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .payment-card { border: none; transition: transform 0.2s, box-shadow 0.2s; } .payment-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .payment-card img { max-height: 150px; object-fit: contain; } .btn-select { background-color: #007bff; color: #fff; font-weight: bold; border-radius: 30px; } .btn-select:hover { background-color: #0056b3; } .header-text { font-family: 'Poppins', sans-serif; font-weight: 600; } </style> </head> <body> <div class="container py-5"> <h2 class="text-center header-text mb-5">Choose Your Payment Method</h2> <div class="row justify-content-center g-4"> <!-- Momo Payment Option --> <div class="col-md-4 col-sm-6"> <div class="card payment-card text-center shadow-sm"> <div class="card-body"> <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRlHpFmvUt-RReq8IT30Lyh_pkGcteh_WhlrawRvclL0P4PPmPH4jPKTxdmALytG_sRIm3gC4fYXumGStjteDed11a7ZYUtiMqn6c95HQ" class="card-img-top mb-3" alt="Momo Payment"> <h5 class="card-title">Momo</h5> <p class="card-text text-muted">Pay easily with Momo wallet and enjoy fast transactions.</p> <button class="btn btn-select w-100 py-2" onclick="selectPayment('Momo')"> Select Momo </button> </div> </div> </div> <!-- VNPay Payment Option --> <div class="col-md-4 col-sm-6"> <div class="card payment-card text-center shadow-sm"> <div class="card-body"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTp1v7T287-ikP1m7dEUbs2n1SbbLEqkMd1ZA&s" class="card-img-top mb-3" alt="VNPay Payment"> <h5 class="card-title">VNPay</h5> <p class="card-text text-muted">Make secure payments with VNPay for peace of mind.</p> <button class="btn btn-select w-100 py-2" onclick="selectPayment('VNPay')"> Select VNPay </button> </div> </div> </div> </div> </div> <!-- JavaScript --> <script> function selectPayment(method) { alert(`You have selected ${method} for payment.`); // Redirect or process payment based on the selection } </script> <!-- Bootstrap JS Bundle --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
