← SitemapWF-22 · CheckoutPopdance wireframes · low-fidelity · numbered markers match the notes at the bottom
URL/checkout/[id]
AudienceCustomer (logged in)
TemplateDynamic template
PriorityLaunch (P1)
UK 🇬🇧 ▾Log inSign up
1. Request 2. Review offer 3. Pay 4. Confirmed

← Back to offer · Secure checkout 1

Your details 2

Sam Okafor
sam@example.co.uk
07700 900123
LS6 2AB

Logged in as sam@example.co.uk. Not you?

Payment method 3

Card (Visa, Mastercard, Amex)
1234 5678 9012 3456
MM / YY
CVC

Error examples: "Your card number is incomplete." "Your card was declined. Try another card or payment method."

Apple Pay / Google Pay
Saved card: Visa ending 4242 (expires 08/28)
Save this card for future bookings

Card fields are hosted by our payments provider. Popdance never sees or stores your full card number.

Promo code 4

Enter code
Apply

Applied: WELCOME10 takes £10.00 off (example).

Error: "This code is not valid or has expired."

How your payment is protected 5

1
Pay today

Your payment is taken and held by Popdance.

2
Event happens

Amelia teaches on Sat 14 Nov. Nothing is paid out yet.

3
Released after 48 hours

If you raise no issue, Amelia is paid.

Cancellation policy 6

Moderate: full refund until Sat 7 Nov, 50% refund until Wed 11 Nov, no refund after (example). Full policy

I agree to the Terms of service, Cancellation policy and Privacy policy. I understand Popdance is the platform and Amelia Hart is the service provider. *

Error: "Please tick the box to agree before paying."

Pay £216.50 and confirm bookingSecure payment · Protected by Popdance

Notes

  1. Secure checkout cue. Slim funnel, no site navigation links that leak users out, lock icon in the real build. noindex. Analytics: checkout_started with booking id and value.
  2. Customer details. Prefilled from account. Mobile is required so the teacher and Popdance can reach the customer on the day (shared with the teacher only after payment). Validation: email format, UK mobile format, postcode format.
  3. Payment method. Provider-hosted fields (marketplace payments provider such as Stripe Connect with Payment Element) so card data never touches Popdance servers. Supports 3D Secure (SCA); show a challenge modal when required. Decline and incomplete errors come from the provider and are shown inline. Saved cards listed from 28-customer-settings.html. Apple Pay and Google Pay shown only where available.
  4. Promo code. Server-side validation against code rules (expiry, minimum spend, single use, region). One code per booking. Applied code shows as a removable line in the summary. Analytics: promo_applied and promo_failed.
  5. Held-funds explainer. Three step graphic plus banner. Copy is legally reviewed text (flag: legal review pending). Links to 08-how-it-works.html. Must state clearly that funds are not released to the teacher until the event is complete and the 48 hour issue window has passed.
  6. Cancellation policy and terms tick box. Policy dates computed from the event date. Tick box required; the Pay button stays enabled but clicking without ticking scrolls to this block and shows the error. Store consent timestamp, policy version and IP with the booking.
  7. Order summary. Sticky on desktop. Line items from the accepted offer, promo discount, service fee and total. Shows event date, group and teacher. Links back to offer and thread.
  8. Service fee line. Customer-paid fee (example 13% capped; final model to be decided) shown separately and clearly, never hidden in the package price. Teacher commission is deducted from the teacher side and is not shown to the customer. Info popover: "What is this fee?".

Mobile

Single column. Order summary moves to the top as a collapsed accordion ("Show order summary, £216.50"). Pay button fixed to the bottom with the total. Wallet buttons (Apple Pay, Google Pay) appear first.

States

Loading: skeleton summary and spinner on payment element. Processing: Pay button shows "Processing..." and the form is locked; do not allow double submit (idempotency key). Declined: inline error, form stays filled. 3D Secure failed: "We could not verify your card. No money has been taken." Timeout: "We are checking your payment. Do not pay again; we will email you shortly." Offer expired or date taken while on this page: blocking message with link to 02-search-results.html. Price changed: refresh prompt. Logged-out: redirect to 29-login.html.