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