<style>
#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;
}
/* Price display styles */
p {
margin-bottom: 10px;
}
#price-per-person,
#total-price {
font-weight: bold;
}
/* Responsive styles */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
</style>
</head>
<body>
<form id="booking-form">
<h2>Booking Form</h2>
<label for="pickup-dropoff">Pick Up & Drop Off Area/City:</label>
<select id="pickup-dropoff" name="pickup-dropoff" required>
<option value="" disabled selected>Choose pick up & drop off</option>
<option value="Falmouth">Falmouth & Duncans (Trelawny)</option>
<option value="Lucea">Lucea (Grand Palladium, Hanover)</option>
<option value="Montego Bay">Montego Bay (St. James)</option>
<option value="Negril">Negril (Westmoreland)</option>
<option value="Ocho Rios">Ocho Rios ([Link])</option>
<option value="Runaway">Runaway Bay ([Link])</option>
</select>
<label for="pickup-date">Pickup Date of Tour:</label>
<input type="date" id="pickup-date" name="pickup-date" required>
<label for="pickup-time">Pickup Time of Tour:</label>
<input type="time" id="pickup-time" name="pickup-time" required>
<label for="pickup-location">Pickup & Drop Off Resort Name OR AirBnb/Villa/Home
Address OR Cruise Ship Port Name:</label>
<input type="text" id="pickup-location" name="pickup-location" required>
<label for="kids-under-5">Number Of Kids Under 5 years old:</label>
<input type="number" id="kids-under-5" name="kids-under-5" value="0" min="0">
<label for="persons-over-5">Number of Persons (5 Years +):</label>
<input type="number" id="persons-over-5" name="persons-over-5" value="1"
min="1" required>
<label for="email">Your Email Address:</label>
<input type="email" id="email" name="email" required>
<p>Price Per Person: $<span id="price-per-person">0.00</span></p>
<p>Total Price: $<span id="total-price">0.00</span></p>
<button type="button" id="google-pay-button">Book and Pay Now</button>
<button type="button" id="pay-later-button">Book and Pay On Arrival</button>
</form>
<script type="text/javascript"
src="[Link]
<script src="[Link]
<script>
// Initialize EmailJS
(function(){
[Link]({
publicKey: "RR28X9JtFyIaAYPWA",
});
})();
// Function to send email with booking information
function sendEmail(bookingInfo) {
const templateParams = {
...bookingInfo,
email: [Link]('email').value,
costForTour: [Link]('total-price').textContent
};
[Link]("service_jkakbwm", "template_ibknzsh", templateParams)
.then(function(response) {
[Link]("Email sent successfully", response);
}, function(error) {
[Link]("Error sending email", error);
});
}
// Function to calculate total price
function calculateTotalPrice() {
const pickupDropoff = [Link]('pickup-dropoff').value;
const personsOver5 = parseInt([Link]('persons-over-
5').value);
let pricePerPerson;
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;
}
const kidsUnder5 = parseInt([Link]('kids-under-5').value);
const totalPrice = pricePerPerson * personsOver5;
[Link]('price-per-person').textContent =
[Link](2);
[Link]('total-price').textContent = [Link](2);
}
// Attach event listeners to input fields and select dropdown to calculate
total price dynamically
[Link]('pickup-dropoff').addEventListener('change',
calculateTotalPrice);
[Link]('pickup-date').addEventListener('change',
calculateTotalPrice);
[Link]('pickup-time').addEventListener('change',
calculateTotalPrice);
[Link]('pickup-location').addEventListener('input',
calculateTotalPrice);
[Link]('kids-under-5').addEventListener('input',
calculateTotalPrice);
[Link]('persons-over-5').addEventListener('input',
calculateTotalPrice);
// Event listener for form submission
[Link]('booking-form').addEventListener('submit',
function(event) {
[Link](); // Prevent default form submission
// Check if the form is valid
if ([Link]('booking-form').checkValidity()) {
// Call function to calculate total price
calculateTotalPrice();
// Retrieve form data
const formData = new FormData([Link]('booking-form'));
// Google Pay integration logic
const paymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['AMEX', 'DISCOVER', 'JCB',
'MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId'
}
}
}
],
merchantInfo: {
merchantName: 'Island Ways Tours',
merchantId: 'BCR2DN4TYGF6BNY4'
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: [Link]('total-price').textContent,
currencyCode: 'USD'
}
};
const paymentsClient = new
[Link]({ environment: 'TEST' });
[Link](paymentDataRequest)
.then(function(paymentData) {
[Link]('Payment data', paymentData);
// Send email after successful payment
sendEmail({
pickupDropoff: [Link]('pickup-
dropoff').value,
pickupDate: [Link]('pickup-date').value,
pickupTime: [Link]('pickup-time').value,
pickupLocation: [Link]('pickup-
location').value,
kidsUnder5: [Link]('kids-under-5').value,
personsOver5: [Link]('persons-over-
5').value
});
})
.catch(function(error) {
[Link]('Error loading payment data', error);
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});
// Event listener for Pay Later button
[Link]('pay-later-button').addEventListener('click',
function(event) {
[Link](); // Prevent default form submission
// Check if the form is valid
if ([Link]('booking-form').checkValidity()) {
// Retrieve form data
const formData = new FormData([Link]('booking-form'));
// Send email without any payment process
sendEmail({
pickupDropoff: [Link]('pickup-dropoff').value,
pickupDate: [Link]('pickup-date').value,
pickupTime: [Link]('pickup-time').value,
pickupLocation: [Link]('pickup-location').value,
kidsUnder5: [Link]('kids-under-5').value,
personsOver5: [Link]('persons-over-5').value
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});
// Event listener for Google Pay button
[Link]('google-pay-button').addEventListener('click',
function(event) {
[Link](); // Prevent default form submission
// Check if the form is valid
if ([Link]('booking-form').checkValidity()) {
// Google Pay integration logic
const paymentDataRequest = {
apiVersion: 2,
apiVersionMinor: 0,
allowedPaymentMethods: [
{
type: 'CARD',
parameters: {
allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
allowedCardNetworks: ['AMEX', 'DISCOVER', 'JCB',
'MASTERCARD', 'VISA'],
},
tokenizationSpecification: {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'example',
gatewayMerchantId: 'exampleGatewayMerchantId'
}
}
}
],
merchantInfo: {
merchantName: 'Island Ways Tours',
merchantId: 'BCR2DN4TYGF6BNY4'
},
transactionInfo: {
totalPriceStatus: 'FINAL',
totalPrice: [Link]('total-price').textContent,
currencyCode: 'USD'
}
};
const paymentsClient = new
[Link]({ environment: 'TEST' });
[Link](paymentDataRequest)
.then(function(paymentData) {
[Link]('Payment data', paymentData);
// Payment process succeeded, no need to send email here
})
.catch(function(error) {
[Link]('Error loading payment data', error);
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});
</script>
