Add your custom HTML hereimport React, { useState } from 'react'; const allowedDates = [ '2025-11-30', '2025-12-06', '2025-12-07', '2025-12-13', '2025-12-14', '2025-12-20', '2025-12-21', '2025-12-22', '2025-12-23', ]; const allowedTimes = ['09:00', '11:30', '14:00']; export default function BookingWidget() { const [date, setDate] = useState(''); const [time, setTime] = useState(''); const [tickets, setTickets] = useState({ under2: 0, child: 0, adult: 0 }); const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [loading, setLoading] = useState(false); const [error, setError] = useState(''); const handleTicketChange = (type, qty) => { setTickets(prev => ({ ...prev, [type]: Math.max(0, Number(qty)) })); }; const handleSubmit = async (e) => { e.preventDefault(); setError(''); if (!date || !time) { setError('Please select a date and time.'); return; } if (!name || !email) { setError('Please enter your name and email.'); return; } if (Object.values(tickets).every(qty => qty === 0)) { setError('Please select at least one ticket.'); return; } setLoading(true); try { const res = await fetch('/api/create-checkout-session', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ date, time, tickets, name, email }), }); const data = await res.json(); if (data.error) { setError(data.error); setLoading(false); return; } // Redirect to Stripe Checkout page const stripe = window.Stripe('pk_test_YourPublishableKeyHere'); await stripe.redirectToCheckout({ sessionId: data.id }); } catch (err) { setError('Something went wrong. Please try again.'); setLoading(false); } }; return (

Book Your Fields Farm Grotto Visit

Date: setDate(e.target.value)} required> Select date {allowedDates.map(d => ( {d} ))} Time: setTime(e.target.value)} required> Select time {allowedTimes.map(t => ( {t} ))} Name:setName(e.target.value)} required /> Email:setEmail(e.target.value)} required />

Tickets

Under 2's:handleTicketChange('under2', e.target.value)} /> Children:handleTicketChange('child', e.target.value)} /> Adults:handleTicketChange('adult', e.target.value)} />

{error &&

{error}

} {loading ? 'Processing...' : 'Book Now'}

); }