093-checkout-page.rst (5013B)
1 DD 93: Checkout Page 2 #################### 3 4 :Design status: Draft 5 :Implementation status: Not started 6 :DD shepherd: TBD 7 :Historical contributors: Vlada Svirsh 8 :First published: 2026-04-21 9 :Last substantive change: 2026-06-24 10 11 Summary 12 ======= 13 The checkout page may be reached from different places, such as a merchant portal or another service integrating 14 Taler. To avoid inconsistent user experiences, Taler should provide a unified checkout design that looks and 15 behaves the same across all integrations. 16 A consistent checkout page helps users immediately recognize a Taler payment flow, builds trust, and makes 17 payment faster and easier to understand. It also ensures shared handling of states such as payment, claim, 18 and completion across all use cases. 19 20 Motivation 21 ========== 22 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 23 when discounts, subscriptions, or other purchase benefits are involved. In these cases, users need to see more information about the order, 24 such as the summary, amount, and merchant name. This can help users to verify the correctness of QR code and purchase details before payment. 25 26 27 Proposed Solution 28 ================= 29 The checkout page should follow one common layout across desktop and mobile, while adapting the content 30 depending on the payment state and available purchase benefits. 31 32 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>`_. 33 34 Default payment 35 --------------- 36 37 .. image:: images/checkout-page-1.png 38 :alt: Default checkout page design 39 40 The default state shows the core payment information in a clear two-column layout on desktop and a stacked 41 layout on mobile. 42 43 At the top of the page, the user sees the Taler heading and a short instruction to scan the QR code with a 44 mobile wallet. The main content area contains: 45 46 * the :ref:`payment QR code <payment-qr>` 47 * Payment deadline as "QR code is available for payment until ``$date``, ``$time``" 48 * the main order metadata next to it 49 * the primary action button to open the Taler wallet 50 * a secondary link for users who do not yet have a wallet 51 * a footer with a link to the GNU Taler website and copyright information 52 53 When available, the order metadata must show the order ID, summary, amount, 54 and merchant name. 55 56 Order with discounts or subscriptions 57 ------------------------------------- 58 .. image:: images/checkout-page-2.png 59 :alt: Checkout page design with discounts and subscriptions 60 61 If the purchase includes discounts, subscription, these should be 62 displayed as additional cards in the order details area next to the main payment information. 63 Page should display a maximum of 2 cards in a row on desktop and stack them vertically on mobile. 64 These 2 cards should be the most beneficial options for the user. Under the cards, text 65 "Scan the payment QR code or open payment link in your Wallet to see the full list of payment options." 66 should be displayed to inform the user that more options are available in the wallet. 67 68 Each card should present a benefit in a compact and scannable way. The card may include: 69 70 * a price condition 71 * coupons or subscriptions to spend/use 72 * the reward granted by the purchase 73 * quantity indicators for repeated or accumulated benefits 74 75 These benefit cards must not replace the core payment information. They are supplementary elements and should 76 remain visually secondary to the QR code, order metadata, and wallet action. On smaller screens, the cards 77 should stack vertically below the main payment section. 78 79 Claimed state / waiting for payment 80 ----------------------------------- 81 82 .. image:: images/checkout-page-3.png 83 :alt: Checkout page design after order claim 84 85 Once the wallet has claimed the order, the QR code should no longer be shown. Instead, the QR code area is 86 replaced by a status panel indicating that the order has been claimed and that the system is waiting for 87 payment confirmation. 88 89 This state should keep the same overall page structure and continue showing the order metadata and main wallet 90 action. Replacing the QR code after claim helps avoid confusion, prevents rescanning of an already claimed 91 order, and makes the current payment state immediately visible. 92 93 Mobile layout 94 ------------- 95 .. image:: images/checkout-page-4.png 96 :alt: Mobile layout of the checkout page 97 :width: 50% 98 99 On mobile devices, the same elements must be preserved but arranged in a single-column flow. The order of 100 elements should be: 101 102 * page heading and instruction 103 * QR code or claimed-state status panel 104 * Payment deadline 105 * wallet action button 106 * wallet installation link 107 * order metadata 108 * discount or subscription cards if available 109 * footer 110 111 The QR code container, action button, and order details should use full available width with appropriate 112 spacing for touch interaction and readability.