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