.success-container { max-width: 600px; margin: 50px auto; padding: 40px; background: linear-gradient(135deg, #d4edda, #c3e6cb); border: 2px solid #28a745; border-radius: 15px; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 10px 30px rgba(40, 167, 69, 0.2); } .success-icon { font-size: 80px; color: #28a745; margin-bottom: 20px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .success-title { font-size: 32px; font-weight: 700; color: #155724; margin-bottom: 15px; } .success-message { font-size: 18px; color: #155724; margin-bottom: 30px; line-height: 1.6; } .order-details { background: white; padding: 25px; border-radius: 10px; margin: 30px 0; border: 1px solid #c3e6cb; text-align: left; } .order-details h3 { color: #155724; margin-bottom: 20px; text-align: center; font-size: 20px; } .detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e9ecef; } .detail-row:last-child { border-bottom: 2px solid #28a745; font-weight: bold; } .detail-label { color: #495057; font-weight: 600; } .detail-value { color: #155724; font-weight: 500; } .next-steps { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 8px; padding: 20px; margin: 30px 0; color: #856404; } .next-steps h4 { margin-bottom: 15px; color: #856404; } .next-steps ul { text-align: left; margin: 0; padding-left: 20px; } .next-steps li { margin-bottom: 8px; } .action-buttons { margin-top: 30px; } .btn { display: inline-block; padding: 15px 30px; margin: 10px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s; } .btn-primary { background: #007bff; color: white; } .btn-primary:hover { background: #0056b3; transform: translateY(-2px); } .btn-secondary { background: #6c757d; color: white; } .btn-secondary:hover { background: #545b62; transform: translateY(-2px); } .transaction-info { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; margin: 20px 0; font-family: monospace; font-size: 14px; color: #495057; } ✅ Payment Successful! Thank you for your billboard advertisement order. Your payment has been processed successfully. 📋 Order Summary Purpose: Loading... Location: Loading... Run Dates: Loading... Total Paid: Loading... Transaction ID: Processing... Payment Date: Processing... 📧 What Happens Next? You will receive a confirmation email within 5 minutes Our design team will review your billboard ad Your ad will go live on the scheduled start date You'll receive updates on your ad's status 🏠 Return to Home 🎨 Create Another Ad document.addEventListener('DOMContentLoaded', function() { // Get URL parameters (PayPal returns transaction info in URL) const urlParams = new URLSearchParams(window.location.search); const transactionId = urlParams.get('tx') || urlParams.get('txn_id') || 'N/A'; const paymentStatus = urlParams.get('st') || 'Completed'; const amount = urlParams.get('amt') || localStorage.getItem('totalCost') || '0.00'; // Load order data from localStorage const orderData = { purpose: localStorage.getItem('selectedPurpose') || 'Not specified', location: localStorage.getItem('billboardLocation') || 'Not specified', dates: localStorage.getItem('runDates') || 'Not specified', total: amount }; // Update display document.getElementById('orderPurpose').textContent = orderData.purpose; document.getElementById('orderLocation').textContent = orderData.location; document.getElementById('orderDates').textContent = orderData.dates; document.getElementById('orderTotal').textContent = '$' + orderData.total; document.getElementById('transactionId').textContent = transactionId; document.getElementById('paymentDate').textContent = new Date().toLocaleString(); // Store payment completion data const paymentData = { transactionId: transactionId, amount: orderData.total, status: paymentStatus, timestamp: new Date().toISOString(), orderData: orderData }; localStorage.setItem('paymentCompleted', JSON.stringify(paymentData)); // Optional: Send completion data to your server // sendPaymentDataToServer(paymentData); console.log('Payment success page loaded:', paymentData); }); // Optional function to send data to your server function sendPaymentDataToServer(paymentData) { // You can implement this to store payment data in your WordPress database fetch('/wp-admin/admin-ajax.php', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: new URLSearchParams({ action: 'store_payment_data', payment_data: JSON.stringify(paymentData) }) }) .then(response => response.json()) .then(data => console.log('Payment data stored:', data)) .catch(error => console.error('Error storing payment data:', error)); }