94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<meta name="description" content="Wakdo - Choisissez votre mode de paiement">
|
|
<title>Wakdo - Paiement</title>
|
|
<link rel="canonical" href="https://corentin-wakdo.stark.a3n.fr/payment.html">
|
|
<link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
|
|
<link rel="stylesheet" href="assets/css/style.css">
|
|
</head>
|
|
<body class="payment-page">
|
|
|
|
<!--
|
|
payment.html — Payment method selection.
|
|
MVP: both buttons simulate payment and redirect to confirmation.html.
|
|
No real payment integration (kiosk demo — out of scope permanently).
|
|
-->
|
|
|
|
<header class="site-header">
|
|
<a
|
|
class="site-header__back"
|
|
href="cart.html"
|
|
aria-label="Retour au panier"
|
|
>
|
|
← Panier
|
|
</a>
|
|
<img
|
|
class="site-header__logo"
|
|
src="assets/images/ui/logo.png"
|
|
alt="Wakdo"
|
|
>
|
|
<span class="mode-badge site-header__mode" data-mode-badge aria-label="Mode de consommation">Sur place</span>
|
|
</header>
|
|
|
|
<main class="payment-main" aria-label="Choix du mode de paiement">
|
|
|
|
<h1 class="payment-main__heading">Comment souhaitez-vous payer ?</h1>
|
|
|
|
<!-- Mini order recap injected by inline script using localStorage -->
|
|
<div class="payment-recap" id="payment-recap" aria-label="Recapitulatif de commande">
|
|
<!-- Filled by page-payment.js -->
|
|
</div>
|
|
|
|
<p class="payment-error" id="payment-error" role="alert" hidden></p>
|
|
|
|
<div class="payment-methods" role="group" aria-label="Modes de paiement">
|
|
|
|
<!--
|
|
Carte bancaire. Paiement simule (pas de PSP), mais la commande est
|
|
REELLEMENT creee + encaissee : page-payment.js -> checkout.submitOrder.
|
|
-->
|
|
<button
|
|
class="payment-choice"
|
|
id="pay-card"
|
|
type="button"
|
|
aria-label="Payer par carte bancaire"
|
|
>
|
|
<!-- Card SVG icon (inline, no external dependency) -->
|
|
<svg class="payment-choice__icon" viewBox="0 0 64 64" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="4" y="14" width="56" height="36" rx="6" ry="6" fill="#FFC72C"/>
|
|
<rect x="4" y="24" width="56" height="8" fill="#1A1A1A"/>
|
|
<rect x="12" y="36" width="16" height="6" rx="2" fill="#fff"/>
|
|
</svg>
|
|
<span class="payment-choice__label">Carte bancaire</span>
|
|
</button>
|
|
|
|
<!-- Especes -->
|
|
<button
|
|
class="payment-choice"
|
|
id="pay-cash"
|
|
type="button"
|
|
aria-label="Payer en especes"
|
|
>
|
|
<!-- Cash SVG icon (inline) -->
|
|
<svg class="payment-choice__icon" viewBox="0 0 64 64" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
|
<rect x="4" y="20" width="56" height="32" rx="4" ry="4" fill="#FFC72C"/>
|
|
<circle cx="32" cy="36" r="8" fill="#fff"/>
|
|
<circle cx="32" cy="36" r="4" fill="#FFC72C"/>
|
|
<rect x="8" y="12" width="48" height="6" rx="2" fill="#E6A800"/>
|
|
</svg>
|
|
<span class="payment-choice__label">Especes</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script type="module" src="assets/js/page-payment.js"></script>
|
|
<script type="module" src="assets/js/nav.js"></script>
|
|
<script type="module" src="assets/js/a11y.js"></script>
|
|
</body>
|
|
</html>
|