Web app example · a service provider charging at booking
This booking flow combines appointment selection with payment, so a customer can secure a service at the time they choose. A temporary hold gives the customer space to finish checkout while reducing the chance that another person selects the same opening.
Before taking payment, explain the service, appointment length, cancellation terms and what counts as a confirmed booking. Decide how the business will handle a payment that fails or a customer who needs to change their time.
Cleo is opening to founders in small batches. Join the waitlist and we'll save your spot.
Updated
A paid appointment flow publishes time slots, holds a selected time during checkout and confirms after payment. Use the sample to name the audience, the main action, and the smallest useful first version. Cleo HQ then helps turn your own brief into a product plan and a working build.
A hold gives one customer a short opportunity to complete payment before the slot returns to general availability. Tell the customer how long the selection is reserved and what happens if checkout is interrupted. The example uses atomic holds to protect the time choice; the business still needs a fair policy for expired holds and a clear message when a slot is no longer available.
Use “confirmed” only after the required payment and appointment checks have succeeded. Before that point, describe the choice as pending or reserved so the customer understands its status. The sample connects checkout with confirmation; the final message should repeat the service, selected time, location and any preparation details the customer needs.
State whether a customer can cancel or move an appointment, how much notice is required, and whether any payment is refundable. Put this information near the booking action rather than burying it in a distant policy page. The example collects payment when the time is chosen, making clear terms important before a customer commits.