Client guide

Checkout confirmation page tutorial

This page confirms the customer’s charter booking result, shows whether the booking is confirmed or awaiting approval, displays the booking reference, explains what happens next, and gives a final summary of the booking and payment.

Confirmed booking Awaiting approval Booking reference Next steps Final summary
Checkout confirmation · Final booking result
Page overview
Final page after payment or authorisation
01
The confirmation page clears the unfinished checkout details so the completed booking is not reused accidentally.
Progress bar shows all checkout steps completed, with Confirmation as the active step.
Status card shows either Confirmed or Awaiting approval.
Booking reference appears in a clear reference pill.
Charter dates section lists each booked date and time.
Boarding section shows guests, pickup, drop-off and notes when notes exist.
Requested add-ons section appears when the booking has request-only add-ons.
What happens next section changes depending on whether the booking is confirmed or awaiting approval.
Final summary shows boat name, boat type, charge rows, GST, discount, held amount or total paid.
Browse more button returns the customer to the home page.
What customers see
Your details
Payment
Confirmation
Booking confirmed
Your charter on Morpheus is confirmed.
CHR-ABC123
📅
Thursday, 25 June 2026
3:00pm – 7:00pm · 4h
Morpheus
Motor Yacht
Charter hire$4,000.00
GST$400.00
Total paid$4,400.00
Browse more boats
Checkout confirmation · Loading and error screens
Opening messages
Shown while the confirmation is being loaded or cannot be loaded
02
Loading screen appears with an anchor icon while booking details are loading.
Error screen appears if the booking cannot be found or cannot be loaded.
Error screen includes a warning icon and the error message.
Error screen link returns the customer to the home page.
If no booking loads after the check, the page stays blank instead of showing incorrect booking information.
Loading and error
Loading confirmation...
⚠️
Booking not found
Checkout confirmation · Progress and back
Completed checkout progress
All steps completed, Confirmation active
03
Back button sends the customer to their account page.
Your details step is marked complete.
Payment step is marked complete.
Confirmation step is marked complete and highlighted as the current step.
Step lines are blue to show the checkout path is finished.
Confirmation progress
Your details
Payment
Confirmation
Checkout confirmation · Confirmed or awaiting approval
Status card and booking reference
The main result card at the top of the page
04
Confirmed status uses a dark blue card with a tick icon.
Confirmed title and subtitle tell the customer the booking is confirmed and include the boat name.
Awaiting approval status uses a gold-grey card with a clock icon.
Awaiting approval subtitle tells the customer how many hours the operator has to respond. If the booking does not provide a different number, the page uses 24 hours.
Booking reference pill appears on both statuses so the customer can quote the reference later.
Status cards
Booking confirmed
Your charter on Morpheus is confirmed.
CHR-ABC123
Awaiting approval
The operator has 24 hours to respond.
CHR-XYZ789
Checkout confirmation · Charter dates
Date and time rows
Each booked slot appears in its own row
05
Charter dates section appears below the status card.
Each slot row has a calendar icon.
Date line shows weekday, day, month and year.
Time line shows start time, end time and duration in hours.
Multiple slots appear as multiple date rows.
Date rows
📅
Thursday, 25 June 2026
3:00pm – 7:00pm · 4h
📅
Friday, 26 June 2026
11:00am – 2:00pm · 3h
Checkout confirmation · Boarding details
Guests, pickup, drop-off and notes
Confirmed boarding information
06
Boarding section appears after charter dates.
Guests cell shows the selected guest count.
Pickup cell shows where the customer boards.
Drop-off cell shows where the customer leaves the boat.
Notes cell appears only when the customer added notes.
When notes appear, they stretch across the full information grid.
Boarding grid
Guests
10 people
Pickup
King Street Wharf
Drop-off
King Street Wharf
Notes
Birthday setup before boarding.
Checkout confirmation · Requested add-ons
Request-only add-ons
Shown only when the booking includes requested add-ons
07
Requested add-ons section appears only when request-only add-ons exist.
Each requested add-on appears as its own line.
Dot marker appears before each requested item.
Requested add-ons are separate from priced add-ons, which appear in the final summary.
Requested add-ons
Decoration request added to your booking.
Special music request added to your booking.
Checkout confirmation · Final summary card
Boat name, type and final total
Right-side booking summary
09
Final summary card appears on the right side on desktop.
Summary header shows boat name and boat type.
Held amount label appears for awaiting approval bookings.
Total paid label appears for confirmed bookings.
Approval note appears under the total for awaiting approval bookings.
Browse more button sits under the summary card and returns the customer to the home page.
Summary card examples
Morpheus
Motor Yacht
Charter hire$4,000.00
GST$400.00
Total paid$4,400.00
Spellbound
Sailing Catamaran
Charter hire$2,600.00
Held$2,600.00
This amount is authorised while approval is pending.
Browse more boats
Checkout confirmation · Summary charge rows
All visible amount rows
Rows appear only when they apply to the booking
10
Charter hire appears first in the summary.
Priced add-ons appear with quantity when quantity is above one.
Food and beverage items appear indented under the summary rows.
Service partners appear with partner name or category.
Partner extras appear indented under the partner row.
Chef service appears when chef charge exists.
Waiter service appears when waiter charge exists.
Security guard appears when security charge exists.
Early access boarding appears when early access fee exists.
Custom location fee appears when that fee exists.
GST appears before discount and final total.
Discount row appears when a promotion discount exists, showing the promotion entry and discount amount.
Charge examples
Morpheus
Motor Yacht
Charter hire$4,000.00
Cleaning fee × 2$100.00
↳ Gourmet Canapé$500.00
Catering$500.00
↳ Dessert platter$120.00
Chef service$500.00
Waiter service$200.00
Security guard$600.00
Early access boarding$100.00
Custom location fee$50.00
GST$667.00
Discount (SAVE10)-$100.00
Total paid$7,137.00
Checkout confirmation · Page actions
Back and browse more
Navigation after confirmation
11
Back button sends the customer to their account page, not to the payment page.
Browse more button returns the customer to the home page.
Customers can use the booking reference when contacting BookMyWave or checking their booking later.
Actions
Browse more boats
Reference: keep the booking reference for future questions about the booking.
Checkout confirmation · Mobile layout
Using confirmation on mobile
Same confirmation details, stacked for phones
12
The confirmation page becomes one column on smaller screens.
Status card becomes more compact with smaller title text.
Boarding information becomes one column so each cell is easy to read.
Summary card is no longer sticky and stacks under the main details.
Browse more button remains full width for easy tapping.
Mobile-style confirmation
Booking confirmed
Your charter is confirmed.
CHR-ABC123
Guests
10 people
Pickup
King Street Wharf
Morpheus
Motor Yacht
Total paid$4,400
Browse more boats