P6 — Checkout / Platba
Účel obrazovky
Finální krok nákupu — výběr platební metody a dokončení objednávky. Musí být maximálně jednoduchá, s Apple Pay / Google Pay na prvním místě pro rychlé dokončení. Countdown timer stále běží.
Content Priority
- Stepper progress — krok 4/5 (Místa → Objednávka → Údaje → Platba → Potvrzení) Stepper / Progress Indicator
- Countdown timer — pokračuje z P4/P5 Countdown Timer
- Rekapitulace objednávky — kompaktní: počet vstupenek, akce, datum, celková cena (collapsible detail) Accordion / ExpandablePrice Summary
- Platební metody grid:
- Apple Pay (iOS) — nativní sheet, zobrazeno jako první na iOS
- Google Pay (Android) — nativní sheet, zobrazeno jako první na Android
- Platební karta — přesměrování na platební bránu (Comgate)
- Hotovost — rezervace (s upozorněním o vyzvednutí)
- Voucher redemption — pokud neuplatněn v P5, poslední šance zadat kupón Text InputPrimary Button
- Licence terms — checkbox s odkazem na obchodní podmínky (povinný) Checkbox
- Celková cena — finální částka (bold, velký font) Price Summary
- CTA „Zaplatit X Kč" / „Rezervovat" — primary button s částkou Primary Button
Interakce
| Trigger | Akce | Cíl |
|---|---|---|
| Tap Apple Pay | Nativní Apple Pay sheet | Biometrika → zpracování → X1 nebo X3 |
| Tap Google Pay | Nativní Google Pay sheet | Autorizace → zpracování → X1 nebo X3 |
| Tap Karta | Přesměrování na platební bránu | In-app browser (Comgate) → X1 nebo X3 |
| Tap Hotovost | Potvrzovací dialog | „Vstupenky budou rezervovány…" → potvrdit → X2 |
| Toggle licence terms | Povinný checkbox | CTA disabled pokud unchecked |
| Tap odkaz obchodní podmínky | Otevření podmínek | In-app browser nebo modal |
| Platba OK | Success state | X1 — Zaplaceno |
| Platba OK (hotovost) | Rezervace potvrzena | X2 — Rezervováno |
| Platba selhala | Error state | X3 — Chyba platba |
| Timer expiry | Timeout | X4 — Timeout |
Stavy
| Stav | Popis | Vizuální chování |
|---|---|---|
| Default | Výběr platební metody | Grid platebních metod, CTA disabled (licence terms unchecked) |
| Ready | Licence terms checked | CTA „Zaplatit X Kč" active |
| Processing | Platba probíhá | Loading overlay s „Zpracováváme platbu…", nelze interagovat |
| Apple/Google Pay sheet | Nativní payment sheet | Systémový bottom sheet s biometrikou |
| Payment gateway | In-app browser (karta) | WebView s platební bránou Comgate |
| Timer critical | < 2 min zbývá | Pulsující timer, urgency messaging |
Edge Cases a Error States
| Scénář | Řešení |
|---|---|
| Apple Pay není dostupné (starší zařízení) | Skrýt Apple Pay option, zobrazit jen Karta + Hotovost |
| Google Pay není nakonfigurované | Skrýt Google Pay, zobrazit alternativy |
| Platba zamítnuta (nedostatek prostředků) | X3 s možností změnit platební metodu |
| Platební brána timeout | X3 + kontakt na podporu, transakce ověřena na pozadí (double-charge ochrana) |
| Uživatel zavře platební bránu (back button) | Návrat na P6, košík zachován, timer pokračuje |
| Timer vypršel během platby v bráně | Server-side check — pokud platba prošla, objednávka se dokončí i po timeru |
| Hotovost = rezervace | Warning dialog: „Vstupenky nejsou zaplaceny. Vyzvedněte a zaplaťte min. X minut před začátkem akce na pokladně." |
| Licence terms checkbox unchecked | CTA „Zaplatit" disabled s tooltip „Potvrďte obchodní podmínky" |
| Změna ceny mezi P5 a P6 | Alert „Cena se změnila od X na Y Kč" s možností pokračovat nebo zrušit |
Mobilní patterny a odlišení od webu
Co děláme zásadně jinak
- Apple Pay / Google Pay jako primary — na webu nedostupné, na mobilu jsou nejrychlejší cesta k dokončení (1 tap + biometrika)
- Nativní payment sheets — místo přesměrování na bránu, nativní sheet s Face ID / otiskem prstu
- Biometrická autorizace — platba potvrzena otiskem / obličejem, ne zadáváním údajů karty
- Single-screen checkout — web má formuláře na jedné stránce, MA dělí do stepper kroků (méně cognitive load)
Co přebíráme z webu
- Comgate jako fallback platební brána
- Hotovostní platba (rezervace) jako alternativa
- Licence terms checkbox
Aplikované patterny
- iOS:
PKPaymentAuthorizationViewControllerpro Apple Pay,SFSafariViewControllerpro platební bránu - Android: Google Pay API (
PaymentsClient),CustomTabsIntentpro platební bránu
API Data
GET/cartPOST/cart/set-personPOST/cart/voucher-payment/addDELETE/cart/voucher-payment/remove/{paymentId}POST/order/createPOST/payment/createGET/codebook/countries| Operace | Endpoint | Trigger | Poznámka |
|---|---|---|---|
| Rekapitulace | GET /cart | Otevření obrazovky | Celý košík včetně fees jako separátních řádků |
| Guest checkout | POST /cart/set-person | Vyplnění osobních údajů | Pro nepřihlášené uživatele |
| Platební voucher | POST /cart/voucher-payment/add | Uplatnění dárkového poukazu | Typ 3 ze 3 voucher typologií — voucher jako platební metoda |
| Vytvoření objednávky | POST /order/create | Tap „Zaplatit" | Převede košík na Order (pre-payment stav) |
| Vytvoření platby | POST /payment/create | Po vytvoření objednávky | Vrací payment URL / parametry pro platební bránu |
| Seznam zemí | GET /codebook/countries | Formulář adresy | Číselník pro dropdown |
CoreAPI poznatek — 23+ platebních metod
PaymentType enum zahrnuje: Card, ApplePay, GooglePay, Cash (= rezervace na pokladnu), BankTransfer, GPWebPay, Gopay, eAPI, Comgate, PayPal, Voucher, LoyaltyProgramPoints (F1 — věrnostní body jako platba), BenefitPlus, Pluxee, Edenred, Benefity, Twisto a další. Fees (servisní poplatek) se zobrazují jako separátní řádky v rekapitulaci.
Reference — Aktuální web
SCR-WEB-33Guest checkout — doručení, platba, osobní údaje formulář
SCR-WEB-37Logged-in checkout — Comgate, voucher, prefilled údajeReference — CineStar benchmark
SCR-CS-15Platební metody grid — karta, převod, Apple Pay, Google Pay, benefity, loyalty bodyInspirace z CineStar
CineStar zobrazuje platební metody jako vizuální grid s ikonami — přehledný, snadno scanovatelný. Apple Pay a Google Pay jsou prominentní. Navíc umožňuje uplatnit věrnostní body inline — tento pattern použijeme v F1 rozšíření.