093-checkout-page.rst (4909B)
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 Page should display a maximum of 2 cards in a row on desktop and stack them vertically on mobile. 56 These 2 cards should be the most beneficial options for the user. Under the cards, text 57 "Scan the payment QR code or open payment link in your Wallet to see the full list of payment options." 58 should be displayed to inform the user that more options are available in the wallet. 59 60 Each card should present a benefit in a compact and scannable way. The card may include: 61 62 * a price condition 63 * coupons or subscriptions to spend/use 64 * the reward granted by the purchase 65 * quantity indicators for repeated or accumulated benefits 66 67 These benefit cards must not replace the core payment information. They are supplementary elements and should 68 remain visually secondary to the QR code, order metadata, and wallet action. On smaller screens, the cards 69 should stack vertically below the main payment section. 70 71 Claimed state / waiting for payment 72 ----------------------------------- 73 74 .. image:: images/checkout-page-3.png 75 :alt: Checkout page design after order claim 76 77 Once the wallet has claimed the order, the QR code should no longer be shown. Instead, the QR code area is 78 replaced by a status panel indicating that the order has been claimed and that the system is waiting for 79 payment confirmation. 80 81 This state should keep the same overall page structure and continue showing the order metadata and main wallet 82 action. Replacing the QR code after claim helps avoid confusion, prevents rescanning of an already claimed 83 order, and makes the current payment state immediately visible. 84 85 Mobile layout 86 ------------- 87 .. image:: images/checkout-page-4.png 88 :alt: Mobile layout of the checkout page 89 :width: 50% 90 91 On mobile devices, the same elements must be preserved but arranged in a single-column flow. The order of 92 elements should be: 93 94 * page heading and instruction 95 * QR code or claimed-state status panel 96 * Payment deadline 97 * wallet action button 98 * wallet installation link 99 * order metadata 100 * discount or subscription cards if available 101 * footer 102 103 The QR code container, action button, and order details should use full available width with appropriate 104 spacing for touch interaction and readability.