📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Test Card Numbers (Demo Only):
Visa: 4111 1111 1111 1111
MasterCard: 5555 5555 5555 4444
Amex: 3782 822463 10005
Use any future expiry date and any 3-digit CVV (4-digit for Amex)

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
+ shippingCost.toFixed(2); updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = ' function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); + total.toFixed(2); } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp('^\\d{' + length + '} function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); ).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = 'Lumpaxwallet Pro x 1: $149.99
' + 'Shipping: function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); + shippingCost.toFixed(2) + '
' + 'Total: function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); + total.toFixed(2) + ''; document.getElementById('reviewItems').innerHTML = items; // Update final total button document.getElementById('finalTotal').textContent = ' function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); + total.toFixed(2); } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = '#10b981'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = ' function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); + newTotal.toFixed(2); } updateTotal(); } else { promoMessage.style.color = '#ef4444'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Initialize on page load document.addEventListener('DOMContentLoaded', function() { // Initialize total updateTotal(); // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); }); }); function selectShipping(element, type) { document.querySelectorAll('.shipping-option').forEach(opt => { opt.classList.remove('selected'); }); element.classList.add('selected'); selectedShipping = type; // Update shipping cost const costs = { 'standard': 9.99, 'express': 19.99, 'overnight': 39.99 }; shippingCost = costs[type]; document.getElementById('shippingCost').textContent = `${shippingCost.toFixed(2)}`; updateTotal(); } function selectPayment(element, type) { document.querySelectorAll('.payment-method').forEach(method => { method.classList.remove('selected'); }); element.classList.add('selected'); selectedPayment = type; } function updateTotal() { const subtotal = 149.99; const total = subtotal + shippingCost; document.getElementById('totalAmount').textContent = `${total.toFixed(2)}`; } function validateShipping() { const required = ['firstName', 'lastName', 'email', 'address', 'city', 'state', 'zipCode', 'country', 'phone']; let isValid = true; required.forEach(fieldId => { const field = document.getElementById(fieldId); const error = field.parentElement.querySelector('.error-text'); if (!field.value.trim()) { field.classList.add('error'); if (error) error.classList.add('show'); isValid = false; } else { field.classList.remove('error'); if (error) error.classList.remove('show'); } }); // Validate email format const email = document.getElementById('email'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (email.value && !emailRegex.test(email.value)) { email.classList.add('error'); email.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } // Validate phone format const phone = document.getElementById('phone'); const phoneRegex = /^[\d\s\-\+\(\)]+$/; if (phone.value && !phoneRegex.test(phone.value)) { phone.classList.add('error'); phone.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } return isValid; } // Card validation functions function detectCardType(number) { const cleaned = number.replace(/\s/g, ''); const patterns = { visa: /^4/, mastercard: /^(5[1-5]|2[2-7])/, amex: /^3[47]/, discover: /^6(?:011|5)/ }; for (const [type, pattern] of Object.entries(patterns)) { if (pattern.test(cleaned)) { return type; } } return null; } function validateCardNumber(number) { const cleaned = number.replace(/\s/g, ''); if (!/^\d{13,19}$/.test(cleaned)) { return false; } // Luhn algorithm let sum = 0; let isEven = false; for (let i = cleaned.length - 1; i >= 0; i--) { let digit = parseInt(cleaned[i]); if (isEven) { digit *= 2; if (digit > 9) { digit -= 9; } } sum += digit; isEven = !isEven; } return sum % 10 === 0; } function validateExpiry(expiry) { const parts = expiry.split('/'); if (parts.length !== 2) return false; const month = parseInt(parts[0]); const year = parseInt('20' + parts[1]); if (month < 1 || month > 12) return false; const now = new Date(); const currentYear = now.getFullYear(); const currentMonth = now.getMonth() + 1; if (year < currentYear) return false; if (year === currentYear && month < currentMonth) return false; return true; } function validateCVV(cvv, cardType) { const length = cardType === 'amex' ? 4 : 3; return new RegExp(`^\\d{${length}} Checkout - Lumpaxwallet

📦 Shipping Information

Please enter your first name
Please enter your last name
Please enter a valid email
Please enter your address
Please enter your city
Please enter your state
Please enter ZIP code
Please select your country
Please enter your phone number

Shipping Method

Standard Shipping
5-7 Business Days
$9.99
Express Shipping
2-3 Business Days
$19.99
Overnight Shipping
Next Business Day
$39.99

💳 Payment Information

💳
Credit Card
🅿️
PayPal
₿
Crypto
Please enter cardholder name
💳
Please enter a valid card number
VISA
MC
AMEX
DISC
Invalid expiry date
Invalid CVV

✅ Review Your Order

Shipping Address

Payment Method

Order Summary

Order Summary

[Image]
Lumpaxwallet Pro
Quantity: 1
$149.99
Subtotal $149.99
Shipping $9.99
Tax $0.00
Total $159.98
Secure 256-bit SSL encryption
Processing Payment
Please do not close this window...
1
Validating card information
2
Securing connection
3
Authorizing payment
4
Confirming order
).test(cvv); } function validatePayment() { let isValid = true; const cardErrors = document.getElementById('cardErrors'); cardErrors.innerHTML = ''; cardErrors.classList.remove('show'); // Validate cardholder name const cardHolder = document.getElementById('cardHolder'); if (!cardHolder.value.trim() || !/^[a-zA-Z\s]+$/.test(cardHolder.value)) { cardHolder.classList.add('error'); cardHolder.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cardHolder.classList.remove('error'); cardHolder.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate card number const cardNumber = document.getElementById('cardNumber'); const cardType = detectCardType(cardNumber.value); if (!validateCardNumber(cardNumber.value)) { cardNumber.classList.add('error'); cardNumber.parentElement.querySelector('.error-text').classList.add('show'); cardErrors.innerHTML = 'Invalid card number. Please check and try again.'; cardErrors.classList.add('show'); isValid = false; } else { cardNumber.classList.remove('error'); cardNumber.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate expiry const expiry = document.getElementById('expiry'); if (!validateExpiry(expiry.value)) { expiry.classList.add('error'); expiry.parentElement.querySelector('.error-text').classList.add('show'); if (isValid) { cardErrors.innerHTML = 'Card has expired or invalid expiry date.'; cardErrors.classList.add('show'); } isValid = false; } else { expiry.classList.remove('error'); expiry.parentElement.querySelector('.error-text').classList.remove('show'); } // Validate CVV const cvv = document.getElementById('cvv'); if (!validateCVV(cvv.value, cardType)) { cvv.classList.add('error'); cvv.parentElement.querySelector('.error-text').classList.add('show'); isValid = false; } else { cvv.classList.remove('error'); cvv.parentElement.querySelector('.error-text').classList.remove('show'); } return isValid; } function nextStep(step) { // Validate current step if (currentStep === 'shipping' && step !== 'shipping') { if (!validateShipping()) return; } if (currentStep === 'payment' && step === 'review') { if (!validatePayment()) return; } // Update step indicators document.querySelectorAll('.step').forEach(s => { s.classList.remove('active', 'completed'); }); // Hide all sections document.querySelectorAll('.form-section').forEach(section => { section.classList.remove('active'); }); // Show new section and update indicators if (step === 'shipping') { document.getElementById('shippingSection').classList.add('active'); document.getElementById('step1').classList.add('active'); } else if (step === 'payment') { document.getElementById('paymentSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('active'); } else if (step === 'review') { document.getElementById('reviewSection').classList.add('active'); document.getElementById('step1').classList.add('completed'); document.getElementById('step2').classList.add('completed'); document.getElementById('step3').classList.add('active'); prepareReview(); } currentStep = step; window.scrollTo({ top: 0, behavior: 'smooth' }); } function prepareReview() { // Prepare shipping review const shipping = document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value + '
' + document.getElementById('address').value + '
' + document.getElementById('city').value + ', ' + document.getElementById('state').value + ' ' + document.getElementById('zipCode').value + '
' + document.getElementById('country').options[document.getElementById('country').selectedIndex].text + '
' + 'Phone: ' + document.getElementById('phone').value + '
' + 'Shipping Method: ' + (selectedShipping.charAt(0).toUpperCase() + selectedShipping.slice(1)); document.getElementById('reviewShipping').innerHTML = shipping; // Prepare payment review const cardNum = document.getElementById('cardNumber').value; const lastFour = cardNum.slice(-4); const payment = 'Payment Method: Credit Card
' + 'Card ending in: ****' + lastFour + '
' + 'Name: ' + document.getElementById('cardHolder').value; document.getElementById('reviewPayment').innerHTML = payment; // Prepare items review const total = 149.99 + shippingCost; const items = ` Lumpaxwallet Pro x 1: $149.99
Shipping: ${shippingCost.toFixed(2)}
Total: ${total.toFixed(2)} `; document.getElementById('reviewItems').innerHTML = items; } function processPayment() { // Final validation if (!validateShipping() || !validatePayment()) { alert('Please complete all required fields correctly before processing payment.'); nextStep('payment'); return; } // Simulate random payment failure (10% chance for demo) const randomFail = Math.random() < 0.1; // Show processing modal document.getElementById('processingModal').classList.add('show'); // Animate processing steps const steps = [ { id: 'step-validate', delay: 1000 }, { id: 'step-secure', delay: 2500 }, { id: 'step-authorize', delay: 4000 }, { id: 'step-confirm', delay: 5500 } ]; // Start first step immediately document.getElementById('step-validate').classList.add('active'); steps.forEach((step, index) => { setTimeout(() => { // Check for random failure at authorization step if (randomFail && step.id === 'step-authorize') { // Show error document.getElementById(step.id).classList.add('active'); setTimeout(() => { document.querySelector('.processing-text').textContent = 'Payment Failed'; document.querySelector('.processing-text').style.color = '#ef4444'; document.querySelector('.processing-subtext').textContent = 'Card was declined. Please try another payment method.'; var stepIcon = document.querySelector('#' + step.id + ' .step-icon'); stepIcon.style.background = '#ef4444'; stepIcon.style.borderColor = '#ef4444'; stepIcon.innerHTML = '✗'; setTimeout(() => { document.getElementById('processingModal').classList.remove('show'); nextStep('payment'); document.getElementById('cardErrors').innerHTML = 'Payment was declined. Please check your card details or try another card.'; document.getElementById('cardErrors').classList.add('show'); }, 2000); }, 500); return; } // Mark previous step as completed if (index > 0) { var prevStep = document.getElementById(steps[index - 1].id); prevStep.classList.remove('active'); prevStep.classList.add('completed'); prevStep.querySelector('.step-icon').innerHTML = '✓'; } // Activate current step if (index < steps.length && !randomFail) { document.getElementById(step.id).classList.add('active'); } }, step.delay); }); // Complete processing and redirect (only if not failed) if (!randomFail) { setTimeout(() => { // Mark last step as completed document.getElementById('step-confirm').classList.remove('active'); document.getElementById('step-confirm').classList.add('completed'); var confirmIcon = document.getElementById('step-confirm').querySelector('.step-icon'); confirmIcon.innerHTML = '✓'; // Store order data const orderData = { orderNumber: 'LW' + Date.now(), date: new Date().toISOString(), total: 149.99 + shippingCost, shipping: { name: document.getElementById('firstName').value + ' ' + document.getElementById('lastName').value, address: document.getElementById('address').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zipCode').value }, payment: { cardLastFour: document.getElementById('cardNumber').value.slice(-4), cardHolder: document.getElementById('cardHolder').value } }; localStorage.setItem('lastOrder', JSON.stringify(orderData)); localStorage.setItem('cartCount', '0'); // Show success message briefly document.querySelector('.processing-text').textContent = 'Payment Successful!'; document.querySelector('.processing-text').style.color = '#10b981'; document.querySelector('.processing-subtext').textContent = 'Redirecting to confirmation...'; // Redirect to thank you page setTimeout(() => { window.location.href = 'thankyou.html'; }, 1000); }, 7000); } } // Format card number input document.getElementById('cardNumber').addEventListener('input', function(e) { let value = e.target.value.replace(/\s/g, ''); let formattedValue = value.match(/.{1,4}/g)?.join(' ') || value; e.target.value = formattedValue; // Detect and highlight card type const cardType = detectCardType(value); document.querySelectorAll('.card-brand').forEach(brand => { brand.classList.remove('active'); }); if (cardType) { document.getElementById(cardType).classList.add('active'); } // Update CVV length for AMEX if (cardType === 'amex') { document.getElementById('cvv').setAttribute('maxlength', '4'); document.getElementById('cvv').setAttribute('placeholder', '1234'); } else { document.getElementById('cvv').setAttribute('maxlength', '3'); document.getElementById('cvv').setAttribute('placeholder', '123'); } }); // Format expiry date input document.getElementById('expiry').addEventListener('input', function(e) { let value = e.target.value.replace(/\D/g, ''); if (value.length >= 3) { value = value.slice(0, 2) + '/' + value.slice(2, 4); } e.target.value = value; }); // Only allow numbers in CVV document.getElementById('cvv').addEventListener('input', function(e) { e.target.value = e.target.value.replace(/\D/g, ''); }); // Real-time validation feedback document.getElementById('cardNumber').addEventListener('blur', function() { if (this.value && !validateCardNumber(this.value)) { this.classList.add('error'); document.getElementById('cardErrors').innerHTML = 'Invalid card number'; document.getElementById('cardErrors').classList.add('show'); } else { this.classList.remove('error'); document.getElementById('cardErrors').classList.remove('show'); } }); document.getElementById('expiry').addEventListener('blur', function() { if (this.value && !validateExpiry(this.value)) { this.classList.add('error'); this.parentElement.querySelector('.error-text').classList.add('show'); } else { this.classList.remove('error'); this.parentElement.querySelector('.error-text').classList.remove('show'); } }); // Initialize updateTotal(); // Apply promo code function function applyPromo() { const promoCode = document.getElementById('promoCode').value.toUpperCase(); const promoMessage = document.getElementById('promoMessage'); const promoCodes = { 'WELCOME10': { discount: 0.10, message: '10% discount applied!' }, 'SAVE20': { discount: 0.20, message: '20% discount applied!' }, 'FREESHIP': { discount: 'freeship', message: 'Free shipping applied!' } }; if (promoCodes[promoCode]) { promoMessage.style.color = 'var(--success)'; promoMessage.textContent = promoCodes[promoCode].message; promoMessage.style.display = 'block'; if (promoCodes[promoCode].discount === 'freeship') { shippingCost = 0; document.getElementById('shippingCost').textContent = '$0.00'; } else { // Apply percentage discount const subtotal = 149.99; const discount = subtotal * promoCodes[promoCode].discount; const newTotal = subtotal - discount + shippingCost; document.getElementById('totalAmount').textContent = `${newTotal.toFixed(2)}`; } updateTotal(); } else { promoMessage.style.color = 'var(--error)'; promoMessage.textContent = 'Invalid promo code'; promoMessage.style.display = 'block'; } } // Prevent form submission on enter document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', function(e) { e.preventDefault(); }); }); // Auto-advance to next field document.getElementById('cvv').addEventListener('input', function() { const cardType = detectCardType(document.getElementById('cardNumber').value); const maxLength = cardType === 'amex' ? 4 : 3; if (this.value.length === maxLength) { // Auto-focus on next button or field document.querySelector('.btn-next').focus(); } }); // Add Enter key support for moving between fields document.querySelectorAll('input').forEach(input => { input.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); const form = this.closest('form'); const inputs = Array.from(form.querySelectorAll('input:not([type="checkbox"])')); const index = inputs.indexOf(this); if (index < inputs.length - 1) { inputs[index + 1].focus(); } } }); });