088-wallet-withdraw.rst (4693B)
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 24 After choosing "Withdraw" action or pressing "Withdraw digital cash" button from "Empty wallet screen", the user is presented with this screen. 25 The keyboard for amount entry automatically opens. 26 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. 27 28 .. image:: wallet-designs/cta-withdraw-2.png 29 30 The user can select a currency from a dropdown list. 31 A warning icon appears next to the currency selector; tapping it opens a dialog (see next image). 32 The warning icon uses the warning color from the :doc:`066-wallet-color-scheme`. 33 34 .. image:: wallet-designs/cta-withdraw-3.png 35 36 The warning dialog displays the message: 37 "The service provider is not trusted by the developers of this wallet." 38 Colors warningContainer and onWarningContainer are applied here. 39 40 .. image:: wallet-designs/cta-withdraw-4.png 41 42 If applicable, fees are displayed below the amount input field. 43 Below the amount section, amount shortcuts defined by the exchange are shown for quick selection. 44 45 More details about the prototype are available here: 46 `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>`_ 47 48 Withdraw pending 49 ~~~~~~~~~~~~~~~~ 50 51 .. image:: wallet-designs/cta-withdraw-pending-1.png 52 53 This screen is shown after the user confirms the withdrawal **if only** 1 QR code available 54 for withdrawal digital cash. 55 56 Screen contains: 57 58 - Header with title "Withdraw pending" 59 - Date of withdrawal 60 - Exchange base_url 61 - Amount 62 - Fees 63 - Text: "Follow the instructions to enter the transfer details into your banking app:" 64 - Primary button "Wire transfers instructions" that opens a screen with instructions for wire transfer (see next image) 65 - Text: "Or share this QR code with your banking app to withdraw digital cash" 66 - Swiss QR code with black and white flag inside 67 - Secondary button "Share" that opens the system share dialog to share the QR code with banking app 68 69 Wire transfer instructions 70 ~~~~~~~~~~~~~~~~~~~~~~~~~~ 71 72 .. image:: wallet-designs/cta-withdraw-wire-instructions.png 73 74 This screen is shown after the user clicks on "Wire transfers instructions" button from "Withdraw pending" screen. 75 76 Screen contains: 77 78 - Header with title "Wire transfer instructions" 79 - Text: "You need to transfer **$amount-with-fees** from your regular bank account to the payment service to receive 80 **$amount** as digital cash in this wallet 81 82 - Warning icon (color warning `#f99c06`) and text: "$accepted-countries bank accounts only" 83 - Divider 84 - 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):" 85 86 - List of details to copy and paste: 87 88 - IBAN 89 - Recipient name 90 - Address 91 - Amount 92 93 - Text: "**Step 2:** Copy this code and paste it into the subject/purpose field in your banking app or website:" 94 - 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" 95 - Subject to copy and paste 96 - 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." 97 - Secondary button "Share" that opens the system share dialog to share the wire transfer instructions with the banking app 98 99 Test Plan 100 ========= 101 102 (If this DD concerns a new or changed feature, describe how it can be tested.) 103 104 Definition of Done 105 ================== 106 107 (Only applicable to design documents that describe a new feature. While the 108 DoD is not satisfied yet, a user-facing feature **must** be behind a feature 109 flag or dev-mode flag.) 110 111 Alternatives 112 ============ 113 114 Drawbacks 115 ========= 116 117 Discussion / Q&A 118 ================ 119 120 (This should be filled in with results from discussions on mailing lists / personal communication.)