Client guide

Checkout payment page tutorial

This page lets customers review payment details, agree to the bond and terms, enter card details, authorise or pay the amount due today, and move to booking confirmation.

Payment step Card details Bond consent Approval booking Deposit or total
Checkout payment · Customer payment and authorisation
Page overview
Second checkout step before confirmation
01
The payment page is the second checkout step. Your details is already completed, Payment is active, and Confirmation is next.
Back buttons let the customer return to the previous page.
Payment subtitle changes depending on whether the booking needs operator approval or can be paid immediately.
Preparing message appears while the payment is being prepared.
Payment error box appears if the booking payment cannot be prepared.
Card payment area appears when payment is ready.
Bond and terms agreement must be ticked before the customer can pay, authorise, or save card details.
Summary card shows boat, date, guests, locations, charges, GST, promotion, flash deal, deposit or total due today.
What customers see
Your details
Payment
Confirmation
Payment
Complete payment to secure your booking.
← Back
Pay $2,200.00
🔒 Secure payment
Booking summary
BOAT IMAGE
Morpheus
Motor Yacht
Guests10 people
Deposit today (50%)$2,200.00
Checkout payment · Opening and missing booking
Missing booking and required details
What happens before payment can appear
02
Missing booking screen appears when no booking is available for checkout.
Anchor icon appears above the missing booking message.
Missing booking link returns the customer to the home page.
If customer email or pickup location is missing, the page returns the customer to the details step.
Resume booking can reopen an existing pending booking when the customer comes back from a saved booking link.
Opening screens
No booking found. Start again
Before payment: the details step must already have customer email and pickup location.
Checkout payment · Progress and back buttons
Payment step progress
Your details done, payment active, confirmation next
03
Top back button appears above the progress steps.
Your details step is marked as completed.
Payment step is marked as active.
Confirmation step is shown as the next step.
Second back button appears near the payment title and also returns to the previous page.
Progress preview
Your details
Payment
Confirmation
← Back
Checkout payment · Preparing payment
Preparing, resume and payment preparation errors
Messages before the card area appears
04
Preparing message appears with a spinner while payment is being prepared.
Resume path can continue an existing pending booking and refresh the payment amount shown today.
If the selected time slot is missing, the page tells the customer to go back and select the charter time again.
If the booking cannot be prepared, a payment preparation error box appears and payment does not continue.
If no card payment is needed, the customer is taken directly to the confirmation page.
Preparing and error examples
Preparing payment...
Payment could not be prepared
Missing selected time slot. Please go back and select the charter time again.
Checkout payment · Card payment area
Enter payment details
Card and supported payment methods appear here
05
Payment details section appears when payment is ready.
Payment area shows available card or payment method tabs.
Customer name, email and phone are used for payment billing details where available.
Australia is used as the billing country for the payment details.
Payment error message appears under the card area if payment fails or the payment provider returns an error.
Payment area
Payment error appears here if payment fails.
Checkout payment · Bond and terms consent
Security bond and terms checkbox
Customer must agree before paying or saving card details
06
Bond and terms checkbox appears below the payment details.
The customer must tick the checkbox before the payment button can be used.
If the customer tries to continue without ticking it, a bond consent error appears.
Terms link opens the terms page in a new browser tab.
Ticking the checkbox clears the bond error.
The checkbox area changes style when selected so the customer can see consent has been given.
Bond checkbox
You must agree to the bond and terms before continuing.
Checkout payment · Payment button wording
Pay, authorise, save card and processing
Button text depends on the booking type and amount due today
07
The button is disabled until the payment area is ready and the bond checkbox is ticked.
Processing message appears while payment or authorisation is being confirmed.
For normal immediate bookings, the button says Pay and shows the amount due today.
For approval bookings, the button says Authorise and shows the amount that will be authorised today.
For deposit bookings, the button uses the deposit amount instead of the full booking value.
For free bookings, the button says Save card for security bond.
After successful confirmation, the customer is sent to the confirmation page for the booking reference.
Button examples
Pay $2,200.00
Pay $2,200.00
Authorise $2,200.00
Save card for security bond →
Processing...
Checkout payment · Approval booking notice
Authorisation before approval
Shown when the booking requires operator approval
08
Approval subtitle appears when the booking requires approval instead of immediate confirmation.
Authorise button appears instead of Pay when approval is required.
Approval notice appears under the payment button and explains the authorisation arrangement.
If deposit applies, the authorisation button uses the deposit amount.
If deposit does not apply, the authorisation button uses the full amount due today.
Approval notice
This booking requires approval before it is confirmed.
Authorise $2,200.00
Approval required. Your payment is authorised while the operator reviews the booking.
Checkout payment · Free booking and bond card save
Free booking payment behaviour
Card saved only for the security bond
09
If the amount due is $0, the page shows a free-booking notice in the card area.
The free-booking notice says the card will not be charged today.
The customer still enters card details for the $2,000 security bond.
The security bond is automatically held 2 days before the charter.
The button says Save card for security bond.
Free booking notice
Your booking is free — we just need your card details for the $2,000 security bond which will be automatically held 2 days before your charter. Your card won't be charged today.
Save card for security bond →
Checkout payment · Summary card
Booking summary beside payment
Final review before confirming payment
10
Summary card remains on the right side on desktop.
Boat image appears when available.
Boat name and type appear under the image.
Each selected slot shows date, start time, end time and duration.
Guests row shows the number of people.
Pickup and drop-off rows show selected boarding and disembark locations.
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 people
PickupKing Street Wharf
Drop-offKing Street Wharf
Secure checkout
Checkout payment · Summary charge rows
All charge types shown on payment page
Rows appear only when they apply to the booking
11
Charter hire shows the base boat hire amount.
Add-ons appear when the booking has add-on totals.
Required charges appear and show guest quantity when charged per head.
Selected service partners appear when they have a selected partner and customer charge.
Partner extras appear indented below partner rows.
Pickup and drop-off fees appear when the boat has those charges.
BYO fee appears when the booking includes BYO charges.
Food and beverage items appear with guest count for per-head items or quantity for other selected items.
Chef, waiter and security appear only when selected or required and not declined.
Early access appears when early boarding is selected and has a fee.
GST appears before final total.
Flash deal row appears when the booking is a flash deal and shows the minimum hours.
Promotion rows show percentage, fixed discount or free item when a promotion has been applied.
Charge examples
Booking summary
Charter hire$4,000.00
Add-ons$150.00
Cleaning fee$50.00
Catering$500.00
↳ Dessert platter$120.00
Pickup fee$50.00
BYO fee$60.00
↳ Gourmet Canapé × 10 (/ head)$500.00
Chef service (1 chef × 4h)$500.00
GST$593.00
Flash dealMin 4h
Promo (SAVE10)10% off
🎁 Free item text$0.00
Checkout payment · Deposit and full payment display
Amount due today
How the payment page displays deposit or full amount
12
If deposit applies, the summary shows total booking value, balance due 40 days before charter and Deposit today (50%).
When deposit applies, the payment or authorisation button uses the deposit amount only.
If deposit does not apply, the summary shows Total and the customer pays or authorises the full amount due today.
Balance later row appears only for deposit bookings.
For resumed bookings, the page updates the displayed deposit or full amount from the current booking payment details.
Deposit and full payment examples

Deposit booking

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

Button: Pay $2,200.00 or Authorise $2,200.00

Full payment booking

No balance-later row appears.

Total due today: $4,400.00

Button: Pay $4,400.00 or Authorise $4,400.00

Checkout payment · Mobile layout
Using payment on mobile
Same payment flow, stacked for small screens
13
The page becomes one column on smaller screens.
The booking summary moves above the payment form so customers can review the booking first.
Payment card area remains full width for easier card entry.
Bond checkbox and payment button remain full width for easy tapping.
Progress bar uses tighter spacing on mobile.
Mobile-style payment
Details
Payment
Booking summary
Deposit today$2,200.00
Payment
Pay $2,200.00