commit 518146137112c711daa32099b61d69dd06f432ca
parent 48ec611c7fc219c2d44cf008ca77b2996ebc914c
Author: Vlada Svirsh <svirv1@bfh.ch>
Date: Fri, 29 May 2026 15:50:03 +0200
improved dd93 and 94
Diffstat:
7 files changed, 18 insertions(+), 24 deletions(-)
diff --git a/design-documents/093-checkout-page.rst b/design-documents/093-checkout-page.rst
@@ -3,10 +3,6 @@ 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.
@@ -14,6 +10,12 @@ A consistent checkout page helps users immediately recognize a Taler payment flo
payment faster and easier to understand. It also ensures shared handling of states such as payment, claim,
and completion across all use cases.
+Motivation
+==========
+Existing payment page shows only the QR code and a link to open the wallet. This design is not sufficient for all use cases, especially
+when discounts, subscriptions, or other purchase benefits are involved. In these cases, users need to see more information about the order,
+such as the summary, amount, and merchant name. This can help users to verify the correctness of QR code and purchase details before payment.
+
Proposed Solution
=================
@@ -35,12 +37,13 @@ At the top of the page, the user sees the Taler heading and a short instruction
mobile wallet. The main content area contains:
* the `QR code <https://docs.taler.net/design-documents/090-branding.html#payment-qr-code-design>`_
+* Payment deadline as "QR code is available far payment until ``$date``, ``$time``
* 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.
+The order metadata must always show the order id, summary, amount, and merchant name, if these fields are available.
Order with discounts or subscriptions
-------------------------------------
@@ -86,6 +89,7 @@ elements should be:
* page heading and instruction
* QR code or claimed-state status panel
+* Payment deadline
* wallet action button
* wallet installation link
* order metadata
diff --git a/design-documents/094-discounts-passes-wallet.rst b/design-documents/094-discounts-passes-wallet.rst
@@ -113,32 +113,27 @@ Inside card next information is displayed:
Order details page
------------------
-
-.. list-table::
- :widths: 50 50
-
- * - .. image:: wallet-designs/order-discounts-passes.png
- :width: 100%
-
- - .. image:: wallet-designs/order-discounts-passes-uncollapsed.png
- :width: 100%
+.. image:: wallet-designs/order-discounts-passes-uncollapsed.png
+ :width: 50%
On this page next information is displayed:
- Merchant logo
- Merchant name
+- Merchant address
- "Review order" section collapsed by default. Linear blur is applied to give a hint to user what is inside this section. When user clicks on "Review order" section, the section expands and blur is removed. In this section next information is displayed:
* Order summary
* List of products with:
- - Picture
+ - Picture (if available at least for one product)
- Name
- - Description
+ - Description (if present and different from order name)
- Quantity with unit name
- - Price, calculated as ``(product price * quantity)`` and currency code
+ - Price per unit
+ - Total price, calculated as ``(product price * quantity)`` and currency code
-- "Payment options" section. Chosen option has ``primary color`` border and primary button "Confirm payment". For each option next information is displayed:
+- "Payment options" section. Chosen option has ``primary color`` border, primary button "Confirm payment" and ``primaryContainer`` background for list of discounts/passes. For each option next information is displayed:
* Price
* "Spend now:" section with the list of discounts and passes applied to the order.
@@ -147,17 +142,13 @@ On this page next information is displayed:
Test Plan
=========
-(If this DD concerns a new or changed feature, describe how it can be tested.)
Definition of Done
==================
-(Only applicable to design documents that describe a new feature. While the
-DoD is not satisfied yet, a user-facing feature **must** be behind a feature
-flag or dev-mode flag.)
-
Alternatives
============
+Instead of blurring the "Review order" section, we could use fade out effect for collapsed section.
Drawbacks
=========
@@ -165,4 +156,3 @@ Drawbacks
Discussion / Q&A
================
-(This should be filled in with results from discussions on mailing lists / personal communication.)
diff --git a/design-documents/images/checkout-page-1.png b/design-documents/images/checkout-page-1.png
Binary files differ.
diff --git a/design-documents/images/checkout-page-2.png b/design-documents/images/checkout-page-2.png
Binary files differ.
diff --git a/design-documents/images/checkout-page-3.png b/design-documents/images/checkout-page-3.png
Binary files differ.
diff --git a/design-documents/images/checkout-page-4.png b/design-documents/images/checkout-page-4.png
Binary files differ.
diff --git a/design-documents/wallet-designs/order-discounts-passes-uncollapsed.png b/design-documents/wallet-designs/order-discounts-passes-uncollapsed.png
Binary files differ.
