commit 788605d9ea06247706e77fa639c6c9f1cc64737c
parent ea14230157cae2e06ce831a72c2f67d3b924b4e0
Author: Vlada Svirsh <svirv1@bfh.ch>
Date: Tue, 21 Apr 2026 19:13:09 +0200
checkout page draft
Diffstat:
3 files changed, 99 insertions(+), 1 deletion(-)
diff --git a/design-documents/090-branding.rst b/design-documents/090-branding.rst
@@ -115,7 +115,7 @@ Additional color definitions
Detailed color values and any future extensions of the palette are available here: :doc:`Color scheme <066-wallet-color-scheme>`.
-
+..payment-qr
Payment QR code design
~~~~~~~~~~~~~~~~~~~~~~
diff --git a/design-documents/093-checkout-page.rst b/design-documents/093-checkout-page.rst
@@ -0,0 +1,96 @@
+DD 93: Checkout Page
+####################
+
+Summary
+=======
+
+
+Motivation
+==========
+The checkout page may be reached from different places, such as a merchant portal or another service integrating
+Taler. To avoid inconsistent user experiences, Taler should provide a unified checkout design that looks and
+behaves the same across all integrations.
+A consistent checkout page helps users immediately recognize a Taler payment flow, builds trust, and makes
+payment faster and easier to understand. It also ensures shared handling of states such as payment, claim,
+and completion across all use cases.
+
+
+Proposed Solution
+=================
+The checkout page should follow one common layout across desktop and mobile, while adapting the content
+depending on the payment state and available purchase benefits.
+
+PenPot design files for the checkout page are available `here <https://penpot.taler.net/#/workspace?team-id=826af720-982c-8096-8006-0dbdd6a758c1&file-id=29e68e1b-4b36-81a2-8007-31db7e7bbdd2&page-id=29e68e1b-4b36-81a2-8007-31db7e7bbdd3>`_.
+
+Default payment
+---------------
+
+.. image:: images/checkout-page-1.png
+ :alt: Default checkout page design
+
+The default state shows the core payment information in a clear two-column layout on desktop and a stacked
+layout on mobile.
+
+At the top of the page, the user sees the Taler heading and a short instruction to scan the QR code with a
+mobile wallet. The main content area contains:
+
+* the `QR code <https://docs.taler.net/design-documents/090-branding.html#payment-qr-code-design>`_
+* the main order metadata next to it
+* the primary action button to open the Taler wallet
+* a secondary link for users who do not yet have a wallet
+* a footer with a link to the GNU Taler website and copyright information
+
+The order metadata must always show the order id, summary, amount, and merchant name.
+
+Order with discounts or subscriptions
+-------------------------------------
+.. image:: images/checkout-page-2.png
+ :alt: Checkout page design with discounts and subscriptions
+
+If the purchase includes discounts, subscription, these should be
+displayed as additional cards in the order details area next to the main payment information.
+
+Each card should present a benefit in a compact and scannable way. The card may include:
+
+* a price condition
+* coupons or subscriptions to spend/use
+* the reward granted by the purchase
+* quantity indicators for repeated or accumulated benefits
+
+These benefit cards must not replace the core payment information. They are supplementary elements and should
+remain visually secondary to the QR code, order metadata, and wallet action. On smaller screens, the cards
+should stack vertically below the main payment section.
+
+Claimed state / waiting for payment
+-----------------------------------
+
+.. image:: images/checkout-page-3.png
+ :alt: Checkout page design after order claim
+
+Once the wallet has claimed the order, the QR code should no longer be shown. Instead, the QR code area is
+replaced by a status panel indicating that the order has been claimed and that the system is waiting for
+payment confirmation.
+
+This state should keep the same overall page structure and continue showing the order metadata and main wallet
+action. Replacing the QR code after claim helps avoid confusion, prevents rescanning of an already claimed
+order, and makes the current payment state immediately visible.
+
+Mobile layout
+-------------
+.. image:: images/checkout-page-4.png
+ :alt: Mobile layout of the checkout page
+ :width: 50%
+
+On mobile devices, the same elements must be preserved but arranged in a single-column flow. The order of
+elements should be:
+
+* page heading and instruction
+* QR code or claimed-state status panel
+* wallet action button
+* wallet installation link
+* order metadata
+* discount or subscription cards if available
+* footer
+
+The QR code container, action button, and order details should use full available width with appropriate
+spacing for touch interaction and readability.
+\ No newline at end of file
diff --git a/design-documents/index.rst b/design-documents/index.rst
@@ -104,4 +104,5 @@ Design documents that start with "XX" are considered deprecated.
090-branding
091-wallet-coin-selection
092-incremental-backup-sync
+ 093-checkout-page
999-template
