.payment-title { text-align: center; font-size: 28px; font-weight: 600; margin-bottom: 30px; color: #333; } .payment-section { background: white; padding: 25px; border-radius: 8px; margin-bottom: 25px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .form-row { display: flex; gap: 15px; margin-bottom: 15px; } .form-col { flex: 1; } .form-col label { display: block; margin-bottom: 5px; font-weight: 600; color: #333; } .form-col input, .form-col select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; } .payment-method-section { margin-bottom: 20px; } .card-details { display: block; margin-top: 20px; } .order-total { background: #e9ecef; padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: center; } .total-amount { font-size: 24px; font-weight: bold; color: #0D7EE8; } .payment-buttons { display: flex; gap: 15px; margin-top: 20px; } .back-to-checkout-btn { flex: 1; background: #6c757d; color: white; padding: 15px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .back-to-checkout-btn:hover { background: #545b62; transform: translateY(-1px); } .submit-payment-btn { flex: 2; background: #28a745; color: white; padding: 15px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .submit-payment-btn:hover { background: #218838; transform: translateY(-1px); }

💳 Payment Information

/* Hide the file input since we'll populate it programmatically */ .hidden-file-input { display: none !important; } // Credit card form validation function validateCreditCardForm() { const requiredFields = [ { name: 'card_number', label: 'Card Number' }, { name: 'expiry_month', label: 'Expiry Month' }, { name: 'expiry_year', label: 'Expiry Year' }, { name: 'cvv', label: 'CVV' }, { name: 'cardholder_name', label: 'Cardholder Name' } ]; for (const field of requiredFields) { const element = document.querySelector(`[name="${field.name}"]`); if (!element || !element.value || element.value === 'Select Month' || element.value === 'Select Year') { alert(`Please fill in the ${field.label} field.`); if (element) element.focus(); return false; } } // Basic card number validation (remove spaces and check length) const cardNumber = document.querySelector('[name="card_number"]').value.replace(/\s/g, ''); if (cardNumber.length 19) { alert('Please enter a valid card number.'); return false; } // CVV validation const cvv = document.querySelector('[name="cvv"]').value; if (cvv.length 4) { alert('Please enter a valid CVV (3-4 digits).'); return false; } return true; } // Initialize payment page document.addEventListener('DOMContentLoaded', function() { // Restore payment form data if returning from checkout restorePaymentFormData(); // Load order data from localStorage const orderData = { total: localStorage.getItem('totalCost') || '0.00', location: localStorage.getItem('billboardLocation') || 'Not selected', dates: localStorage.getItem('runDates') || 'Not selected', purpose: localStorage.getItem('selectedPurpose') || 'Not selected', design: localStorage.getItem('adDesignData') || '{}' }; // Update display document.getElementById('totalAmount').textContent = `$${orderData.total}`; document.getElementById('orderSummary').textContent = `${orderData.purpose} billboard in ${orderData.location} for ${orderData.dates}`; // Set hidden fields document.getElementById('order_total').value = orderData.total; document.getElementById('order_details').value = JSON.stringify(orderData); document.getElementById('payment_location').value = orderData.location; document.getElementById('payment_dates').value = orderData.dates; document.getElementById('payment_purpose').value = orderData.purpose; document.getElementById('payment_design').value = orderData.design; // Populate all additional hidden fields including billboard image file populateAllHiddenFields(); }); // Function to create final high-resolution billboard image (20x10 feet) function createFinalBillboardImage(sourceImageData) { return new Promise((resolve, reject) => { try { console.log('createFinalBillboardImage: Creating final 20x10 feet billboard image...'); const img = new Image(); img.onload = function() { // Create high-resolution canvas for final output const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); // Set dimensions for 20x10 feet at 150 DPI (good quality, manageable size) // 20 feet = 240 inches, 10 feet = 120 inches canvas.width = 240 * 150; // 36,000 pixels canvas.height = 120 * 150; // 18,000 pixels // Enable high-quality scaling ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; // Draw the source image scaled to final dimensions ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Convert to data URL with high quality const finalImageData = canvas.toDataURL('image/png', 0.95); console.log(`createFinalBillboardImage: Created ${canvas.width}x${canvas.height} final image`); resolve(finalImageData); }; img.onerror = function() { reject(new Error('Failed to load source image')); }; img.src = sourceImageData; } catch (error) { reject(error); } }); } // Function to convert base64 to File object function base64ToFile(base64String, filename) { // Remove data URL prefix if present const base64Data = base64String.replace(/^data:image\/[a-z]+;base64,/, ''); // Convert base64 to binary const byteCharacters = atob(base64Data); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i { const element = document.getElementById(id); if (element) { element.value = value; console.log(`Set ${id}:`, value ? 'Present' : 'Empty'); } else { console.warn(`Hidden field ${id} not found`); } }; // Set all hidden fields setHiddenField('hidden_country', country); setHiddenField('hidden_state', state); setHiddenField('hidden_city', city); setHiddenField('payment_location', billboardLocation); setHiddenField('payment_dates', runDates); setHiddenField('payment_purpose', purpose); setHiddenField('payment_design', adDesignData); setHiddenField('selected_template', selectedTemplate); setHiddenField('text_lines', textLines); setHiddenField('bg_color', bgColor); setHiddenField('bg_type', bgType); // Convert base64 billboard image to actual file for proper submission if (billboardCanvasImage) { try { const timestamp = new Date().toISOString().replace(/[:.]/g, '-'); const filename = `billboard-${purpose}-20x10ft-${timestamp}.png`; // Create final high-resolution image for submission createFinalBillboardImage(billboardCanvasImage) .then(finalImageData => { const imageFile = base64ToFile(finalImageData, filename); // Create a DataTransfer object to set the file input const dataTransfer = new DataTransfer(); dataTransfer.items.add(imageFile); const fileInput = document.getElementById('billboard_file'); if (fileInput) { fileInput.files = dataTransfer.files; setHiddenField('billboard_name', filename); console.log('Final high-resolution billboard image converted to file:', filename); } }) .catch(error => { console.warn('Failed to create final high-res image, using standard resolution:', error); // Fallback to standard resolution const imageFile = base64ToFile(billboardCanvasImage, filename); const dataTransfer = new DataTransfer(); dataTransfer.items.add(imageFile); const fileInput = document.getElementById('billboard_file'); if (fileInput) { fileInput.files = dataTransfer.files; setHiddenField('billboard_name', filename); console.log('Standard billboard image converted to file:', filename); } }); } catch (error) { console.error('Error converting billboard image to file:', error); } } console.log('All hidden fields populated successfully'); } // Back to checkout function function goBackToCheckout() { console.log('Navigating back to checkout page...'); // Preserve payment form data in case user returns const paymentFormData = { firstName: document.querySelector('input[name="first_name"]').value, lastName: document.querySelector('input[name="last_name"]').value, email: document.querySelector('input[name="customer_email"]').value, phone: document.querySelector('input[name="phone_number"]').value, cardNumber: document.querySelector('input[name="card_number"]').value, cardholderName: document.querySelector('input[name="cardholder_name"]').value, paymentMethod: 'card' }; // Store payment form data localStorage.setItem('paymentFormData', JSON.stringify(paymentFormData)); // Navigate back to checkout window.location.href = 'https://www.borgesmedia.com/template-billboard-ad/'; } // Restore payment form data if returning from checkout function restorePaymentFormData() { const savedData = localStorage.getItem('paymentFormData'); if (savedData) { try { const formData = JSON.parse(savedData); // Restore form fields if (formData.firstName) document.querySelector('input[name="first_name"]').value = formData.firstName; if (formData.lastName) document.querySelector('input[name="last_name"]').value = formData.lastName; if (formData.email) document.querySelector('input[name="customer_email"]').value = formData.email; if (formData.phone) document.querySelector('input[name="phone_number"]').value = formData.phone; if (formData.cardNumber) document.querySelector('input[name="card_number"]').value = formData.cardNumber; if (formData.cardholderName) document.querySelector('input[name="cardholder_name"]').value = formData.cardholderName; console.log('Payment form data restored:', formData); } catch (e) { console.error('Error restoring payment form data:', e); } } } // Handle form submission document.addEventListener('wpcf7mailsent', function(event) { console.log('Payment form submitted successfully'); // Get form data const formData = { firstName: document.querySelector('input[name="first_name"]').value, lastName: document.querySelector('input[name="last_name"]').value, email: document.querySelector('input[name="customer_email"]').value, phone: document.querySelector('input[name="phone_number"]').value, cardNumber: document.querySelector('input[name="card_number"]').value, expiryMonth: document.querySelector('select[name="expiry_month"]').value, expiryYear: document.querySelector('select[name="expiry_year"]').value, cvv: document.querySelector('input[name="cvv"]').value, cardholderName: document.querySelector('input[name="cardholder_name"]').value, amount: document.getElementById('order_total').value, orderDetails: document.getElementById('order_details').value }; // Clear stored payment data localStorage.removeItem('paymentFormData'); // Show success message alert(`Thank you ${formData.firstName}! Your payment information has been submitted. You will receive a confirmation email shortly.`); // Redirect to success page window.location.href = 'https://www.borgesmedia.com/billboard-ad-pay-success/'; }); // Add form validation before submission document.addEventListener('wpcf7beforesubmit', function(event) { if (!validateCreditCardForm()) { event.preventDefault(); return false; } });