Spaces:
Running
Running
File size: 3,003 Bytes
7c7c7d7 483d4d5 7c7c7d7 483d4d5 7c7c7d7 483d4d5 7c7c7d7 483d4d5 7c7c7d7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | document.addEventListener('DOMContentLoaded', function() {
// Format card number input
const cardNumberInput = document.getElementById('card-number');
cardNumberInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/\s+/g, '');
if (value.length > 0) {
value = value.match(new RegExp('.{1,4}', 'g')).join(' ');
}
e.target.value = value;
});
// Format expiry date input
const expiryDateInput = document.getElementById('expiry-date');
expiryDateInput.addEventListener('input', function(e) {
let value = e.target.value.replace(/\D/g, '');
if (value.length >= 2) {
value = value.substring(0, 2) + '/' + value.substring(2);
}
e.target.value = value;
});
// Only allow numbers for CVC
const cvcInput = document.getElementById('cvc');
cvcInput.addEventListener('input', function(e) {
e.target.value = e.target.value.replace(/\D/g, '');
});
// Form submission
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form values
const cardNumber = cardNumberInput.value.replace(/\s+/g, '');
const expiryDate = expiryDateInput.value;
const cvc = cvcInput.value;
const cardholder = document.getElementById('cardholder').value;
// Simple validation
if (!cardNumber || !expiryDate || !cvc || !cardholder) {
alert('Please fill in all fields');
return;
}
if (cardNumber.length < 16) {
alert('Please enter a valid card number');
return;
}
if (cvc.length < 3) {
alert('Please enter a valid CVC');
return;
}
// Show loading state
const submitBtn = paymentForm.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.innerHTML = '<span>Processing...</span>';
// Prepare payment data
const paymentData = {
cardNumber: cardNumber,
expiryDate: expiryDate,
cvc: cvc,
cardholder: cardholder
};
// Make API call
fetch('http://localhost:5000/api/payments', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(paymentData)
})
.then(response => response.json())
.then(data => {
alert('Payment processed successfully!');
paymentForm.reset();
})
.catch(error => {
alert('Error processing payment: ' + error.message);
})
.finally(() => {
submitBtn.disabled = false;
submitBtn.innerHTML = '<span>Submit Payment</span><i data-feather="arrow-right" class="ml-2"></i>';
feather.replace();
});
});
}); |