Client guide

Checkout details page tutorial

This page collects the customer’s contact details, confirms pickup and drop-off details, accepts optional notes and promotion entries, then shows a full booking summary before moving to payment.

Your details Boarding details Promotion entry Booking summary Deposit rule
Checkout details · Customer information and booking review
Page overview
Confirm customer details before payment
01
Progress bar shows three steps: Your details, Payment and Confirmation.
Back button returns the customer to the previous page.
Contact section collects full name, email, phone and confirmation email.
Boarding section confirms pickup and drop-off locations.
Special requests section lets customers add optional notes.
Promotion section lets customers apply or remove a promotion entry.
Continue button validates required fields and moves the customer to payment.
Booking summary shows boat, date, time, guests, charges, GST, discount, deposit or full amount due today.
What customers see
Your details
Payment
Confirmation
Your details
Confirm your booking contact and boarding information.
Rick Leung
0430...
SAVE10
Apply
Continue to payment
Booking summary
BOAT IMAGE
Morpheus
Motor Yacht
Boat hire$4,000.00
GST$400.00
Total$4,400.00
Secure checkout
Checkout details · Opening messages
Missing booking and loading screen
What appears before the checkout form is ready
02
Missing booking screen appears when no booking has been prepared for checkout.
Anchor icon appears above the missing booking message.
Missing booking link returns the customer to the home page.
Loading message appears while the checkout details are being prepared.
Signed-in customer details are filled automatically when available: name, email, confirmation email and phone.
Opening screens
No booking found. Start again
Loading checkout details...
Checkout details · Progress and back
Checkout progress bar
Shows where the customer is in checkout
03
Back button returns to the previous page.
Your details step is active on this page.
Payment step appears next in the checkout path.
Confirmation step appears as the final step.
Blue dot marks the current step.
Progress bar
Your details
Payment
Confirmation
Checkout details · Contact details
Name, email, phone and email confirmation
Required customer contact details
04
Page title and subtitle explain that the customer is completing details before payment.
Contact details section contains all required customer contact fields.
Name field is required. If empty, a name required message appears.
Email field is required and must be a valid email address.
Phone field is required. If empty, a phone required message appears.
Confirm email field is required. It must match the email field.
If emails do not match, an email mismatch message appears.
When the customer types in a field, the related error clears.
Contact form
Your details
Confirm your booking contact details.
Your name
Name is required.
you@example.com
0430...
wrong@example.com
Email addresses do not match.
Checkout details · Boarding details
Pickup and drop-off locations
Confirm where the charter starts and ends
05
Boarding section appears after contact details.
Boarding hint appears under the section label.
Pickup field is required. If missing, a pickup required message appears.
Drop-off field is required. If missing, a drop-off required message appears.
Location icon appears inside both location fields.
Standard pickup and drop-off fields are locked. Customers can read them but cannot edit them.
Custom pickup field becomes editable only when custom pickup was requested during boat selection.
Custom drop-off field becomes editable only when custom drop-off was requested during boat selection.
Boarding fields
Confirm where you will board and leave the boat.
📍 King Street Wharf
📍 Select drop-off
Drop-off is required.
Editable only when custom: standard wharf fields are locked so the booking location stays consistent.
Checkout details · Special requests
Optional customer notes
Add booking instructions before payment
06
Special requests section appears after boarding details.
Notes field is optional. Customers can leave it blank.
Notes can include customer requests such as boarding notes, celebration notes or other booking instructions.
Blank notes are saved as no note when the customer continues.
Special request box
Checkout details · Promotion entry
Apply, validate and remove promotion entries
Discount and free item handling
07
Promotion section appears after special requests.
Promotion entry field automatically changes letters to uppercase.
Only letters and numbers remain in the promotion field.
Press Enter in the promotion field to apply it.
Apply button checks the promotion entry.
Apply button is disabled when the field is empty or while the promotion is being checked.
Checking message appears on the apply button while the promotion is being checked.
Invalid promotion message appears with the reason when the promotion cannot be used.
Applied promotion card shows a check mark, promotion entry, description and discount value.
Promotion can be percentage, fixed amount or free item. Percentage and fixed entries reduce the displayed subtotal. Free item entries show the free item text.
Remove button clears the promotion and restores the original displayed totals.
Promotion examples
SAVE10
Apply
Promotion could not be used.
SAVE10
Promotion applied
10% off
Remove
GIFT
Promotion applied
🎁 Free item text
Remove
Checkout details · Continue to payment
Validation and saving
What happens when customers continue
08
Continue button checks all required fields before moving to payment.
Required checks include name, valid email, confirmation email, matching emails, phone, pickup and drop-off.
If any required field is missing, the page stays on this step and shows field messages.
Saving message appears while the page prepares the booking for payment.
When all checks pass, the customer moves to the payment step.
Customer details, pickup, drop-off, notes, promotion and updated totals are carried forward to payment.
Continue button
Continue to payment
Saving...
Required: name, valid email, matching confirmation email, phone, pickup and drop-off must be completed.
Checkout details · Summary sidebar
Boat, date, guests and totals
Review the booking before payment
09
Summary card stays on the right side on desktop.
Summary title appears in the dark header.
Boat image appears when available.
Boat name and boat type appear below the image.
Each selected slot shows date, start time, end time and duration.
Guests row shows the selected guest count.
GST row shows GST based on the displayed subtotal after discount.
Secure note appears at the bottom of the summary.
Summary card
Booking summary
BOAT IMAGE
Morpheus
Motor Yacht
Thu, 25 June
3:00pm – 7:00pm · 4h
Guests10 guests
Boat hire$4,000.00
GST$400.00
Total$4,400.00
Secure checkout
Checkout details · Summary charge rows
Every possible charge shown in the summary
Only rows with a positive amount are shown, except request-only items
10
Charter hire appears when the boat hire amount exists.
Pickup, drop-off, custom pickup, custom drop-off and wharf surcharges appear when those fees apply.
BYO fee appears when BYO charges apply.
Required charges appear with guest quantity when charged per head.
Priced add-ons appear with per-head guest count and quantity when relevant.
Request-only add-ons show as on request instead of a price.
Selected service partners appear with price, per-head quantity, per-hour duration or POA when no price is available.
Partner extras appear under the selected partner when chosen.
Food and beverage items appear with item name, packs, hours or quantity depending on charging style.
Waiter, chef and security rows appear when they apply and have a charge.
ASAP rush premium appears when the booking includes urgent-request pricing.
Early access fee appears when early boarding is selected and has a charge.
Charge examples
Booking summary
Charter hire$4,000.00
Pickup wharf surcharge$100.00
↳ Cleaning fee$50.00
↳ Decoration requestOn request
↳ Catering (Food)$500.00
↳ Gourmet Canapé × 10$500.00
Chef service (1 chef × 4h)$500.00
ASAP rush premium$200.00
Early access (60 mins)$100.00
Checkout details · Deposit and full payment rule
Amount charged today
Exact payment display used by this page
11
Promotion discount is applied before GST is recalculated.
Displayed discount cannot be less than $0 and cannot be more than the booking subtotal.
If the first charter date is 40 days or more away, the summary shows a 50% deposit due today.
For deposit bookings, the summary also shows total booking value and the remaining 50% balance due 40 days before the charter.
If the first charter date is under 40 days away, the full displayed total is due today.
The summary total label changes between Deposit today (50%) and Total depending on the timing rule.
Deposit vs full payment

40 days or more away

Total booking value: $4,400.00
Balance due 40 days before charter: $2,200.00
Deposit today (50%): $2,200.00

Under 40 days away

No later balance row appears.

Total due today: $4,400.00

Exact page rule: this page treats 40 days or more as deposit eligible.
Checkout details · Mobile layout
Using checkout details on mobile
Same form, stacked for smaller screens
12
The page becomes one column on smaller screens.
The booking summary moves above the form so customers can review the booking first.
Contact fields stack vertically instead of sitting side by side.
The progress bar uses smaller spacing on mobile.
Continue button remains full width for easy tapping.
Mobile-style checkout
Your details
Payment
Booking summary
Total$4,400.00
Your details
Rick Leung
you@example.com
Continue to payment