.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
Total Amount:
$0.00
Loading order details...
📋 Customer Information
First Name*
Last Name*
Email Address*
Phone Number*
💳 Credit/Debit Card Information
Card Number*
Expiry Month*
Expiry Year*
CVV*
Cardholder Name*
🔒
Secure Payment Processing
Your payment information is encrypted and processed securely. We accept Visa, MasterCard, American Express, and Discover.
← Back to Checkout
/* 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;
}
});
