Checkout

/* Basic styles for the checkout page */
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
}
.header, .section, .total, .payment {
margin-bottom: 20px;
}
.header h2 {
text-align: center;
}
.section h3 {
margin-bottom: 10px;
}
.section label {
display: block;
margin-bottom: 8px;
}
.total span {
font-weight: bold;
font-size: 1.2em;
}
.payment form {
display: flex;
justify-content: center;
}

// Update Total Amount Dynamically
const checkboxes = document.querySelectorAll(‘input[type=”checkbox”]’);
const totalAmount = document.getElementById(‘total-amount’);
const paypalAmount = document.getElementById(‘paypal-amount’);

checkboxes.forEach(checkbox => {
checkbox.addEventListener(‘change’, () => {
let total = 1800; // Base amount of selected packages
checkboxes.forEach(box => {
if (box.checked) {
total += parseFloat(box.value);
}
});
totalAmount.textContent = total.toFixed(2);
paypalAmount.value = total.toFixed(2);
});
});