Background
This is the task to add native support for GPay into the Android Wikipedia App in partnership with fr-tech. Adding Native payment method support was one of the proposed enhancements identified for improving donor experience in the apps. Fr-tech and the iOS team have already added support for ApplePay. Adding support for Google / Apple Pay was also a request in the 2022 Wishlist.
Requirements
- Entry points for flow: 1) From the "Donate" option in settings 2) from an in-app banner
- An option to "Donate with GPay" or via "Other payment method" should be presented when tapping Donate
- The GooglePay option or any branding should not be visible if the user doesn't have GooglePay set-up or is restricted for compliance reasons. In this case, the user should be sent directly to donate.wikimedia.org
- Tapping "Donate with GPay" should launch the Native Donation form
- The Native Donation form should have functional parity with iOS's native donation form
- Array of amounts
- Cursor should be not be active on Amount entry initially
- Choosing an amount button autofills that amount into the amount field.
- Error message for when an amount is below the minimum accepted donation amount (Match donate.wikimedia.org)
- Error message for when an amount is above $25,000 USD (Match donate.wikimedia.org)
- Checkbox for transaction fee I'll generously add X to cover the transaction fees so you can keep 100% of my donation.
- Choosing to pay transaction fees automatically adds that amount into the amount field
- Checkbox for recurring donation Make this a monthly recurring donation.
- Checkbox for email opt-in Yes, the Wikimedia Foundation may send me an occasional email.
- "Donate with GPay" button should use pre-packaged branded button from Google
- Links below the donation form should be:
- After donating via GPay, show a Thank you message in-app (on article or screen that they started on before clicking into Settings or on the banner)
- Tapping "Other payment method" should launch the existing link used in the app to donate.wikimedia.org
Designs (Figma)
Below are the final mockups of the "Donate with Google Pay" flow that can be found in this Figma file.
Contributors can access the "Donate with Google Pay" action through Settings menu in the bottom right navigation bar and through article banners.
Settings entry point
- If the user donates from the Settings menu, once they finish their donation return them to the page they were on, with “thank you” toast displayed.
Article banner
In-app donation flow
[click image to see full screen]
- Once the user clicks "Donate now" in the article banner they are navigated to the in-app donation flow
- If they choose "Other payment" they are navigated to the existing donation experience on mobile web
- Details of the spec are in Figma
References:
- Brand guidelines from Google https://developers.google.com/pay/api/android/guides/brand-guidelines
- Can be based on ApplePay general flow (ApplePay Parent task with designs: T288285, figma)
- Also consider existing Android Banner/Donation flow designs: Figma
To do:
- AV Create rough mockups and share for feedback in April 18 Combined Apps
- DB Share mockups with Google
- AV Create final mockups and attach to Sub Epic
