Payment - Form With Notification

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment - Form</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Payment Details</h1>
        <div class="decoration"></div>
        <div class="input_container">
            <label class="input_label" for="card-number-input">Card Number</label>
            <input type="text" id="card-number-input" class="input_field" placeholder="Enter Card Number" maxlength="19">
            <img id="card-icon" class="card-icon" src="" alt="Card Type Icon">
            <div id="card-number-error" class="input_error hidden">Invalid card number</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="expiry-date-input">Expiry Date (MM/YY)</label>
            <input type="text" id="expiry-date-input" class="input_field" placeholder="MM/YY" maxlength="5">
            <div id="expiry-date-error" class="input_error hidden">Invalid expiry date</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="cardholder-name-input">Cardholder Name</label>
            <input type="text" id="cardholder-name-input" class="input_field" placeholder="Your Full Name">
            <div id="cardholder-name-error" class="input_error hidden">Name cannot contain numbers</div>
        </div>
        <div class="input_container">
            <label class="input_label" for="cvv-input">Security Code (CVV)</label>
            <input type="text" id="cvv-input" class="input_field" placeholder="CVV" maxlength="3">
            <div id="cvv-error" class="input_error hidden">Invalid CVV</div>
        </div>
        <button class="button" id="card-button">
            <span>Pay with Card</span>
        </button>
        <button class="button" id="paypal-button">
            <span>Pay with PayPal</span>
        </button>
        <div class="footer">
            <p>© 2024 Anes. All Rights Reserved.</p>
        </div>
    </div>

CSS

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #001f3f, #0e4e92);
    animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}

.container {
    width: 90%;
    max-width: 450px;
    background-color: rgba(25, 25, 25, 0.9);
    border-radius: 15px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    padding: 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

h1 {
    color: #1e90ff;
    margin-bottom: 20px;
    font-size: 2.5em;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
}

.input_container {
    margin-bottom: 20px;
    text-align: left;
    position: relative;
}

.input_label {
    font-size: 14px;
    color: #d1d1d1;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.input_field {
    width: 100%;
    height: 45px;
    padding: 0 16px; /* Remove right padding */
    border-radius: 9px;
    background-color: #1a1a1a;
    color: #1e90ff;
    border: 1px solid #444;
    transition: all 0.3s;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px; /* Space between input and error */
}

.input_field:focus {
    border: 1px solid #1e90ff;
    background-color: #333;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
}

.input_error {
    color: #ff4d4d;
    font-size: 12px;
    margin-top: 5px;
}

.card-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: auto;
    display: none; /* Hide by default */
}

.button {
    background: #005ea6;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 15px 20px;
    font-size: 18px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s;
    width: 100%;
    margin-top: 10px;
}

.button:hover {
    background: #007bb5;
    transform: translateY(-2px);
}

.footer {
    text-align: center;
    margin-top: 20px;
    color: #d1d1d1;
    font-size: 12px;
}

.decoration {
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, #1e90ff, #005ea6);
    border-radius: 5px;
    margin-bottom: 20px;
}

.notification {
    position: fixed;
    top: 20px;
    right: -300px;
    background-color: #1e90ff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: right 0.5s ease;
    z-index: 1000;
}

.hidden {
    display: none;
}

JS

document.addEventListener("DOMContentLoaded", function() {
    const cardNumberInput = document.getElementById('card-number-input');
    const expiryDateInput = document.getElementById('expiry-date-input');
    const cvvInput = document.getElementById('cvv-input');
    const cardholderNameInput = document.getElementById('cardholder-name-input');
    const cardIcon = document.getElementById('card-icon');

cardNumberInput.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '').substring(0, 16);
        e.target.value = value.replace(/(\d{4})(?=\d)/g, '$1 ');

// Determine card type
        const cardType = getCardType(value);
        if (cardType) {
            cardIcon.src = cardType.icon;
            cardIcon.style.display = 'block'; // Show the icon
        } else {
            cardIcon.style.display = 'none'; // Hide the icon
            document.getElementById('card-number-error').classList.remove('hidden'); // Show error
        }
    });

expiryDateInput.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '').substring(0, 4);
        e.target.value = value.length >= 2 ? value.substring(0, 2) + '/' + value.substring(2, 4) : value;

if (!/^(0[1-9]|1[0-2])\/?([0-9]{2})$/.test(e.target.value)) {
            document.getElementById('expiry-date-error').classList.remove('hidden'); // Show error
        } else {
            document.getElementById('expiry-date-error').classList.add('hidden'); // Hide error
        }
    });

cvvInput.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/\D/g, '').substring(0, 3);
        if (e.target.value.length < 3) {
            document.getElementById('cvv-error').classList.remove('hidden'); // Show error
        } else {
            document.getElementById('cvv-error').classList.add('hidden'); // Hide error
        }
    });

cardholderNameInput.addEventListener('input', function(e) {
        e.target.value = e.target.value.replace(/[0-9]/g, '');
        if (/\d/.test(e.target.value)) {
            document.getElementById('cardholder-name-error').classList.remove('hidden'); // Show error
        } else {
            document.getElementById('cardholder-name-error').classList.add('hidden'); // Hide error
        }
    });

function getCardType(number) {
        const cardTypes = [
            { name: 'Visa', regex: /^4[0-9]{12}(?:[0-9]{3})?/, icon: 'https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Inc._logo.svg' },
            { name: 'MasterCard', regex: /^5[1-5][0-9]{14}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/0/4d/MasterCard-logo.svg' },
            { name: 'American Express', regex: /^3[47][0-9]{13}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/3/3f/American_Express_logo.svg' },
            { name: 'Discover', regex: /^6(?:011|5[0-9]{2})[0-9]{12}/, icon: 'https://upload.wikimedia.org/wikipedia/commons/5/5e/Discover_Logo.svg' }
        ];
        return cardTypes.find(type => type.regex.test(number)) || null;
    }

document.getElementById('card-button').addEventListener('click', () => {
        if (document.getElementById('card-number-error').classList.contains('hidden') &&
            document.getElementById('expiry-date-error').classList.contains('hidden') &&
            document.getElementById('cvv-error').classList.contains('hidden') &&
            document.getElementById('cardholder-name-error').classList.contains('hidden')) {
            showNotification('Payment with Card processed!');
        }
    });

document.getElementById('paypal-button').addEventListener('click', () => showNotification('Payment with PayPal processed!'));
});

Payment - Form With Notification

Recommended

CSS Text Color Animation

Simple Login Form

Neon Login Form

HTML

CSS

JS

Recommended

CSS Text Color Animation

Simple Login Form

Neon Login Form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS