Payment gateway

PHOTO EMBED

Thu Nov 21 2024 05:35:01 GMT+0000 (Coordinated Universal Time)

Saved by @sem 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Page</title>
    <script>
        function validateForm() {
            // Clear previous errors
            document.getElementById("errorMessage").innerHTML = "";

            // Get form values
            var name = document.getElementById("name").value;
            var cardNumber = document.getElementById("cardNumber").value;
            var expirationDate = document.getElementById("expirationDate").value;
            var cvv = document.getElementById("cvv").value;

            // Patterns for credit card number, expiration date, and CVV
            var cardPattern = /^\d{16}$/; // 16 digit card number
            var expDatePattern = /^(0[1-9]|1[0-2])\/\d{2}$/; // MM/YY format
            var cvvPattern = /^\d{3}$/; // 3 digit CVV

            // Validate Name
            if (name == "") {
                document.getElementById("errorMessage").innerHTML += "Name is required.<br>";
                return false;
            }

            // Validate Card Number
            if (cardNumber == "") {
                document.getElementById("errorMessage").innerHTML += "Card number is required.<br>";
            } else if (!cardNumber.match(cardPattern)) {
                document.getElementById("errorMessage").innerHTML += "Please enter a valid 16-digit card number.<br>";
                return false;
            }

            // Validate Expiration Date
            if (expirationDate == "") {
                document.getElementById("errorMessage").innerHTML += "Expiration date is required.<br>";
            } else if (!expirationDate.match(expDatePattern)) {
                document.getElementById("errorMessage").innerHTML += "Please enter a valid expiration date (MM/YY).<br>";
                return false;
            }

            // Validate CVV
            if (cvv == "") {
                document.getElementById("errorMessage").innerHTML += "CVV is required.<br>";
            } else if (!cvv.match(cvvPattern)) {
                document.getElementById("errorMessage").innerHTML += "Please enter a valid 3-digit CVV.<br>";
                return false;
            }

            // If all validations pass, submit the form
            alert("Payment successful!");
            return true;
        }
    </script>
</head>
<body>

<h2>Payment Page</h2>

<!-- Error message -->
<div id="errorMessage" style="color: red;"></div>

<form onsubmit="return validateForm()">
    <label for="name">Name on Card:</label><br>
    <input type="text" id="name" name="name"><br><br>

    <label for="cardNumber">Credit Card Number:</label><br>
    <input type="text" id="cardNumber" name="cardNumber" maxlength="16"><br><br>

    <label for="expirationDate">Expiration Date (MM/YY):</label><br>
    <input type="text" id="expirationDate" name="expirationDate" maxlength="5" placeholder="MM/YY"><br><br>

    <label for="cvv">CVV (3-digit):</label><br>
    <input type="text" id="cvv" name="cvv" maxlength="3"><br><br>

    <input type="submit" value="Submit Payment">
</form>

</body>
</html>
content_copyCOPY