Code
Code
#booking-form {
font-family: Arial, sans-serif;
}
/* Form styles */
#booking-form {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#booking-form h2 {
margin-bottom: 20px;
text-align: center;
}
/* Label styles */
label {
display: block;
margin-bottom: 8px;
}
/* Input styles */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* Button styles */
button {
width: 40vw;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
color: #fff;
background-color: #007bff;
}
button:hover {
background-color: #0056b3;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<form id="booking-form">
<h2>Booking Form</h2>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
<script src="https://pay.google.com/gp/p/js/pay.js"></script>
<script>
// Initialize EmailJS
(function(){
emailjs.init({
publicKey: "RR28X9JtFyIaAYPWA",
});
})();
switch (pickupDropoff) {
case 'Falmouth':
pricePerPerson = 20;
break;
case 'Lucea':
pricePerPerson = 25;
break;
case 'Montego Bay':
pricePerPerson = 10;
break;
case 'Negril':
pricePerPerson = 30;
break;
case 'Ocho Rios':
pricePerPerson = 35;
break;
case 'Runaway':
pricePerPerson = 30;
break;
default:
pricePerPerson = 0;
}
document.getElementById('price-per-person').textContent =
pricePerPerson.toFixed(2);
document.getElementById('total-price').textContent = totalPrice.toFixed(2);
}
paymentsClient.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
console.log('Payment data', paymentData);
// Send email after successful payment
sendEmail({
pickupDropoff: document.getElementById('pickup-
dropoff').value,
pickupDate: document.getElementById('pickup-date').value,
pickupTime: document.getElementById('pickup-time').value,
pickupLocation: document.getElementById('pickup-
location').value,
kidsUnder5: document.getElementById('kids-under-5').value,
personsOver5: document.getElementById('persons-over-
5').value
});
})
.catch(function(error) {
console.error('Error loading payment data', error);
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});
paymentsClient.loadPaymentData(paymentDataRequest)
.then(function(paymentData) {
console.log('Payment data', paymentData);
// Payment process succeeded, no need to send email here
})
.catch(function(error) {
console.error('Error loading payment data', error);
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});
</script>