0% found this document useful (0 votes)
38 views6 pages

Code

The document contains code for a booking form with fields for pickup/drop off details and number of passengers. It includes logic for dynamically calculating prices, validating the form, and sending booking data via email or Google Pay on form submission.

Uploaded by

winstonbrown1516
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
38 views6 pages

Code

The document contains code for a booking form with fields for pickup/drop off details and number of passengers. It includes logic for dynamically calculating prices, validating the form, and sending booking data via email or Google Pay on form submission.

Uploaded by

winstonbrown1516
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<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 (St.Ann)</option>
<option value="Runaway">Runaway Bay (St.Ann)</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="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",
});
})();

// Function to send email with booking information


function sendEmail(bookingInfo) {
const templateParams = {
...bookingInfo,
email: document.getElementById('email').value,
costForTour: document.getElementById('total-price').textContent
};

emailjs.send("service_jkakbwm", "template_ibknzsh", templateParams)


.then(function(response) {
console.log("Email sent successfully", response);
}, function(error) {
console.error("Error sending email", error);
});
}

// Function to calculate total price


function calculateTotalPrice() {
const pickupDropoff = document.getElementById('pickup-dropoff').value;
const personsOver5 = parseInt(document.getElementById('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(document.getElementById('kids-under-5').value);


const totalPrice = pricePerPerson * personsOver5;

document.getElementById('price-per-person').textContent =
pricePerPerson.toFixed(2);
document.getElementById('total-price').textContent = totalPrice.toFixed(2);
}

// Attach event listeners to input fields and select dropdown to calculate


total price dynamically
document.getElementById('pickup-dropoff').addEventListener('change',
calculateTotalPrice);
document.getElementById('pickup-date').addEventListener('change',
calculateTotalPrice);
document.getElementById('pickup-time').addEventListener('change',
calculateTotalPrice);
document.getElementById('pickup-location').addEventListener('input',
calculateTotalPrice);
document.getElementById('kids-under-5').addEventListener('input',
calculateTotalPrice);
document.getElementById('persons-over-5').addEventListener('input',
calculateTotalPrice);

// Event listener for form submission


document.getElementById('booking-form').addEventListener('submit',
function(event) {
event.preventDefault(); // Prevent default form submission

// Check if the form is valid


if (document.getElementById('booking-form').checkValidity()) {
// Call function to calculate total price
calculateTotalPrice();

// Retrieve form data


const formData = new FormData(document.getElementById('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: document.getElementById('total-price').textContent,
currencyCode: 'USD'
}
};

const paymentsClient = new


google.payments.api.PaymentsClient({ environment: 'TEST' });

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.');
}
});

// Event listener for Pay Later button


document.getElementById('pay-later-button').addEventListener('click',
function(event) {
event.preventDefault(); // Prevent default form submission

// Check if the form is valid


if (document.getElementById('booking-form').checkValidity()) {
// Retrieve form data
const formData = new FormData(document.getElementById('booking-form'));

// Send email without any payment process


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
});
} else {
alert('Please fill in all required fields before proceeding.');
}
});

// Event listener for Google Pay button


document.getElementById('google-pay-button').addEventListener('click',
function(event) {
event.preventDefault(); // Prevent default form submission

// Check if the form is valid


if (document.getElementById('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: document.getElementById('total-price').textContent,
currencyCode: 'USD'
}
};

const paymentsClient = new


google.payments.api.PaymentsClient({ environment: 'TEST' });

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>

You might also like