function formatCardDetails() { const input = document.getElementById("card-details"); let value = input.value.replace(/\D/g, ''); // Remove all non-digit characters// Apply input masking let cardNumber = value.slice(0, 16); // First 16 digits are card number let expiry = value.slice(16, 20); // Next 4 digits are expiry date MMYY let cvc = value.slice(20, 23); // Last 3 digits are CVC// Format card number with spaces after every 4 digits if (cardNumber.length > 0) { cardNumber = cardNumber.match(/.{1,4}/g).join(' '); }// Format expiry date as MM/YY if (expiry.length > 0) { expiry = expiry.slice(0, 2) + '/' + expiry.slice(2); }// Combine formatted inputs into a single field let formattedValue = cardNumber; if (expiry.length > 0) { formattedValue += ' ' + expiry; } if (cvc.length > 0) { formattedValue += ' ' + cvc; }input.value = formattedValue;// Call the function to detect the card type and show the logo detectCardType(value); }function detectCardType(number) { const logo = document.getElementById("card-logo"); // Regex patterns for different card types const visaPattern = /^4[0-9]{0,15}/; const masterCardPattern = /^5[1-5][0-9]{0,14}/; const amexPattern = /^3[47][0-9]{0,13}/;// Check card type based on the number if (visaPattern.test(number)) { logo.src = "https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png"; // Visa Logo } else if (masterCardPattern.test(number)) { logo.src = "https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg"; // MasterCard Logo } else if (amexPattern.test(number)) { logo.src = "https://upload.wikimedia.org/wikipedia/commons/3/30/American_Express_logo.svg"; // AmEx Logo } else { logo.src = "https://upload.wikimedia.org/wikipedia/commons/2/2a/Credit_card_font_awesome.svg"; // Default card placeholder logo } }