};
return symbols[currency] || '£';
}
// ============================================
// CHECK IF EMAILS MATCH
// ============================================
function checkEmailsMatch() {
const email = document.getElementById('attendee-email').value;
const emailConfirm = document.getElementById('attendee-email-confirm').value;
const message = document.getElementById('email-match-message');
const button = document.getElementById('checkout-button');
if (emailConfirm === '') {
message.style.display = 'none';
return;
}
message.style.display = 'block';
if (email === emailConfirm) {
message.textContent = '✓ Emails match';
message.style.color = 'green';
button.disabled = false;
} else {
message.textContent = '✗ Emails do not match';
message.style.color = 'red';
button.disabled = true;
}
}
document.getElementById('attendee-email').addEventListener('input', checkEmailsMatch);
document.getElementById('attendee-email-confirm').addEventListener('input', checkEmailsMatch);
// ============================================
// UPDATE TOTAL WHEN QUANTITY CHANGES
// ============================================
document.getElementById('quantity').addEventListener('input', updateTotalPrice);
function updateTotalPrice() {
const select = document.getElementById('event-select');
const selectedOption = select.options[select.selectedIndex];
if (selectedOption.value) {
const event = JSON.parse(selectedOption.dataset.event);
const quantity = parseInt(document.getElementById('quantity').value);
const total = event.price * quantity;
document.getElementById('total-price').textContent = `Total: £${total.toFixed(2)} for ${quantity} ticket${quantity > 1 ? 's' : ''}`;
}
}
// ============================================
// HANDLE FORM SUBMISSION
// ============================================
document.getElementById('ticket-form').addEventListener('submit', async function(e) {
e.preventDefault();
const button = document.getElementById('checkout-button');
const errorDiv = document.getElementById('error-message');
// Check emails match before proceeding
const email = document.getElementById('attendee-email').value;
const emailConfirm = document.getElementById('attendee-email-confirm').value;
if (email !== emailConfirm) {
errorDiv.textContent = 'Emails do not match. Please check and try again.';
return;
}
button.disabled = true;
button.textContent = 'Processing...';
errorDiv.textContent = '';
const select = document.getElementById('event-select');
const selectedOption = select.options[select.selectedIndex];
const event = JSON.parse(selectedOption.dataset.event);
// Combine first name and surname
const firstName = document.getElementById('attendee-firstname').value;
const surname = document.getElementById('attendee-surname').value;
const fullName = `${firstName} ${surname}`;
// Prepare data to send to backend
// This data will be passed to Stripe and stored in metadata
const formData = {
eventId: event.id, // Airtable Record ID
eventName: event.name, // from "Event Name" ⚠️ MUST MATCH AIRTABLE
stripePriceId: event.stripePriceId, // from "Stripe Price ID" ⚠️ MUST MATCH AIRTABLE
quantity: document.getElementById('quantity').value,
attendeeName: fullName, // Combined first + surname - Will be saved to "Name" field ⚠️ MUST MATCH AIRTABLE
attendeeEmail: email, // Will be saved to "Email" field ⚠️ MUST MATCH AIRTABLE
dateTime: event.dateTime, // from "Date + Time Friendly" ⚠️ MUST MATCH AIRTABLE
venueAddress: event.venueAddress // from "Venue Address" ⚠️ MUST MATCH AIRTABLE
};
try {
const response = await fetch(`${API_BASE}/create-checkout`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
const data = await response.json();
if (response.ok) {
// Redirect to Stripe Checkout
const result = await stripe.redirectToCheckout({
sessionId: data.sessionId
});
if (result.error) {
throw new Error(result.error.message);
}
} else {
throw new Error(data.error);
}
} catch (error) {
console.error('Error:', error);
errorDiv.textContent = error.message;
button.disabled = false;
button.textContent = 'Proceed to Payment';
}
});
// ============================================
// INITIALIZE: Load events when page loads
// ============================================
loadEvents();
