088-wallet-withdraw.rst (4869B)
1 DD 88: Wallet Withdrawal Experience 2 ################################### 3 4 Summary 5 ======= 6 This document describes withdraw flow and experience in wallet. It defines what Android, iOS and WebExtension 7 should follow in order to have a coherent withdrawal experience between platforms. 8 9 Motivation 10 ========== 11 We want user to have smooth withdrawal experience independent of the platform they are using. 12 13 Requirements 14 ============ 15 16 Proposed Solution 17 ================= 18 19 Withdraw 20 ~~~~~~~~ 21 22 .. image:: wallet-designs/cta-withdraw-1.png 23 :width: 50% 24 25 After choosing "Withdraw" action or pressing "Withdraw digital cash" button from "Empty wallet screen", the user is presented with this screen. 26 The keyboard for amount entry automatically opens. 27 The Withdraw button is disabled until a valid amount is entered. Once a valid amount is provided, the button is enabled and displayed with the primary color. 28 29 .. image:: wallet-designs/cta-withdraw-2.png 30 :width: 50% 31 32 The user can select a currency from a dropdown list. 33 A warning icon appears next to the currency selector; tapping it opens a dialog (see next image). 34 The warning icon uses the warning color from the :doc:`066-wallet-color-scheme`. 35 36 .. image:: wallet-designs/cta-withdraw-3.png 37 :width: 50% 38 39 The warning dialog displays the message: 40 "The service provider is not trusted by the developers of this wallet." 41 42 .. image:: wallet-designs/cta-withdraw-4.png 43 44 If applicable, fees are displayed below the amount input field. 45 Below the amount section, amount shortcuts defined by the exchange are shown for quick selection. 46 47 More details about the prototype are available here: 48 `Penpot Prototype <https://penpot.taler.net/#/workspace?team-id=826af720-982c-8096-8006-0dbdd6a758c1&file-id=29e68e1b-4b36-81a2-8006-bf7630bda762&page-id=29e68e1b-4b36-81a2-8006-bf7630bda763&layout=assets>`_ 49 50 Withdraw pending 51 ~~~~~~~~~~~~~~~~ 52 53 .. image:: wallet-designs/cta-withdraw-pending-1.png 54 55 This screen is shown after the user confirms the withdrawal **if only** 1 QR code available 56 for withdrawal digital cash. 57 58 Screen contains: 59 60 - Header with title "Withdraw pending" 61 - Date of withdrawal 62 - Exchange base_url 63 - Amount 64 - Fees 65 - Text: "Follow the instructions to enter the transfer details into your banking app:" 66 - Primary button "Wire transfers instructions" that opens a screen with instructions for wire transfer (see next image) 67 - Text: "Or share this QR code with your banking app to withdraw digital cash" 68 - Swiss QR code with black and white flag inside 69 - Secondary button "Share" that opens the system share dialog to share the QR code with banking app 70 71 Wire transfer instructions 72 ~~~~~~~~~~~~~~~~~~~~~~~~~~ 73 74 .. image:: wallet-designs/cta-withdraw-wire-instructions.png 75 76 This screen is shown after the user clicks on "Wire transfers instructions" button from "Withdraw pending" screen. 77 78 Screen contains: 79 80 - Header with title "Wire transfer instructions" 81 - Text: "You need to transfer **$amount-with-fees** from your regular bank account to the payment service to receive 82 **$amount** as digital cash in this wallet 83 84 - Warning icon (color warning `#f99c06`) and text: "$accepted-countries bank accounts only" 85 - Divider 86 - Text: "**Step 1:** If you don't already have it in your banking favorites list, then copy and paste **IBAN, recipient name, address** and **amount** into the matching fields in your banking app or website (and save it for next time):" 87 88 - List of details to copy and paste: 89 90 - IBAN 91 - Recipient name 92 - Address 93 - Amount 94 95 - Text: "**Step 2:** Copy this code and paste it into the subject/purpose field in your banking app or website:" 96 - Warning banner (color WarningContainer `#fdedd3`, rounding radius 15) with warning icon and text: "This is mandatory, otherwise your money will not arrive in this wallet" 97 - Subject to copy and paste 98 - Text: "**Step 3:** Finish the wire transfer of 11.23 CHF in your banking app or website, then this withdrawal will proceed automatically. Depending on your bank the transfer can take from minutes up to 2 business days. Please be patient." 99 - Secondary button "Share" that opens the system share dialog to share the wire transfer instructions with the banking app 100 101 Test Plan 102 ========= 103 104 (If this DD concerns a new or changed feature, describe how it can be tested.) 105 106 Definition of Done 107 ================== 108 109 (Only applicable to design documents that describe a new feature. While the 110 DoD is not satisfied yet, a user-facing feature **must** be behind a feature 111 flag or dev-mode flag.) 112 113 Alternatives 114 ============ 115 116 * Alternative for input amount to simplify implementing 117 * Higher positioning of elements, so shortcuts are not hiden by keyboard 118 119 .. image:: wallet-designs/cta-withdraw-alt-1.png 120 :width: 50% 121 122 123 Drawbacks 124 ========= 125 126 Discussion / Q&A 127 ================ 128 129 (This should be filled in with results from discussions on mailing lists / personal communication.)