Page MenuHomePhabricator

Donatewiki & paymentswiki open within in-app webviews
Closed, ResolvedPublic

Assigned To
None
Authored By
Seddon
Mar 27 2023, 1:42 AM
Referenced Files
F37987725: IMG_8951.PNG
Oct 5 2023, 6:51 PM
F37987723: IMG_8950.PNG
Oct 5 2023, 6:51 PM
F37987719: IMG_8952.PNG
Oct 5 2023, 6:51 PM
F37933685: ios-apple-pay-20.png
Oct 3 2023, 4:41 PM
F37727601: ios-apple-pay-20.png
Sep 22 2023, 11:02 AM
File Not Attached
F37727599: ios-apple-pay-19.png
Sep 22 2023, 11:02 AM
File Not Attached
F37727597: ios-apple-pay-18.png
Sep 22 2023, 11:02 AM
File Not Attached
F37727595: ios-apple-pay-17.png
Sep 22 2023, 11:02 AM
File Not Attached

Description

Background

When a user clicks donate in the app they're taken out of the app. While we can't have complete native payment for Android and iOS at this time, we can open it in the app through web view.

Task
  • Implement designs that shows the workflow of someone clicking Donate from the banner and from the donate action in the overflow menu and seeing the Donate screen in Web view on Android
User Story

As a potential first-time donor in the Wikipedia app, I prefer that if I must be brought into a web browser, it is shown in the Wikipedia app so that I can easily resume what I was doing by clicking the Back button after donating.

Minimum Requirements
  • All non-native donate actions should launch the donate wiki in an in-app web view
  • Users should remain in the in-app web view as they progress through the flow for payments wiki and thankyou.wikipedia.org
  • Maintain the previous context when a user hits Back
  • Maintain the top toolbar to indicate the user is still in the app
  • Flow can be entered via banners AND other entry points such as from the apps menu

Nice to have

Requirements for both apps:

  • support autofill for address and credit card credentials
WORKFLOW

banner (native view) --> donate.wikimedia.org (app web view) --> payments.wikimedia.org (app web view) --> thankyou.wikipedia.org (app web view) --> continue reading

Reference
  • Donor experiences deck
Designs
1. Banner
ios-apple-pay-06b.png (1×786 px, 170 KB)
2. Web form
ios-apple-pay-17.png (1×786 px, 265 KB)
3. Details
ios-apple-pay-18.png (1×786 px, 67 KB)
4. Recurring
ios-apple-pay-19.png (1×786 px, 120 KB)
5. Thank you
ios-apple-pay-20.png (1×786 px, 340 KB)
  • "Donate now" in the banner (T344026) and the link in Settings take users to a web form.
  • Note: If available on the device, the web form also features an "Apple Pay option.
  • The "Thank you" page features a prominent button at the bottom to take users back to the article.

Testing Notes

This can be tested starting in Wikipedia TestFlight 7.4.3 (2809) build.

Testing tips:
All new donor experience work (in-app web view, new campaign modals with maybe later, multilingual campaign support, Apple Pay native donation) are set up to become available in the app only once the Netherlands or Italy Oct/Nov 2023 campaigns become valid.

  1. Device iOS Settings > Language & Region > Region needs to be set to either the Netherlands or Italy
  2. Device date & time needs to be set on or after the campaign start date (change device date to 10/17)
  3. After fresh install, you must background and foreground the app, then pull to refresh on the Explore feed to trigger a force refresh of the campaign data.
  4. To be provided the option to donate via Apple Pay (native donate form), you must have a valid card set up in Apple Wallet.

Event Timeline

LGoto triaged this task as Low priority.Mar 28 2023, 4:25 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-Android-App-Backlog board.

@Mazevedo Notes from sync:

ArticleViewController+Announcements.swift has a self.navigate(to: url, useSafari: true) for navigating to Safari when tapping "Donate" on a campaign.
WMFSettingsViewController.m has a similar [self wmf_navigateToURL:[self donationURL] useSafari:YES]; call for the Donate navigation.

Setting that useSafari app to false will hopefully automatically route you to using SingleWebViewController.swift to keep this flow in-app.

Once you get the flow displaying in SingleWebViewController.swift, then you can maybe check the view controller's url property in viewDidAppear. If it equals thankyou.wikipedia.org, display that "Go back" button, which will take you back to the article or Settings root view once tapped.

@cmadeo It is possible for a user to reach this in-app web view from app Settings > Donate. In this case, it feels weird for them to see the "Return to article" button on the thank you page when they didn't come from an article. In this situation should we change the button title to just say "Return" and have it return them to the root Settings view?

ios-apple-pay-20.png (1×786 px, 340 KB)

@Tsevener updating the text to 'Return' or 'Done' and returning them to their root Settings view (or article) works for me

This comment was removed by Tsevener.

Hi @cmadeo,

I have pushed a build with some design review for what we have on the new Donor Experiences so far.

  1. Download TestFlight Experimental build # 7.4.3(45) on a test device.
  2. Now, change your device region (Settings > General > Language and Region) to the Netherlands to qualify for our faked active campaign.
  3. Open the Experimental app. Background, then foreground, then pull to refresh on the Explore feed to trigger campaigns to fetch.
  4. Visit an EN or NL article, then tap "Donate now". It should take you to an in-app web view. I have mucked with this build so that after you tap a payment method, it will send you straight to the thank you page without charging you for testing purposes.
  5. Go to Settings. Tapping "Donate to Wikipedia" should send you to the same in-app web view.

Note, this piece isn't in yet. https://phabricator.wikimedia.org/T333108#9221619 Feel free to note it in your feedback notes so we don't lose track of it. Thanks!

Thanks @Tsevener! Here are some things I came across during design review:

IMG_8952.PNG (2×1 px, 158 KB)
  • In-put box feels a bit off / unfinished here, would it be possible for there to be an outline stroke in addition to the shadow? Maybe a 1 or .5pt #000 stroke?
  • Additionally the arrow in the top left is two different colors. Could we use SF Symbol arrow.backward
  • The font is also different than defined in the Mocks, would it be possible to use a serif font like Georgia or New York?

IMG_8950.PNG (2×1 px, 174 KB)
IMG_8951.PNG (2×1 px, 175 KB)
  • Same arrow and type issues as above
  • In the mocks the options are presented as side-by-side vs. stacked, is this possible?
  • If you are partially scrolled down the page when you tap through, the dialog is scrolled down and partially cut-off (see second screenshot above)

  • When donating from the setting view I am not seeing the thank you page
  • I am only prompted to switch to a monthly donation when I select Paypal
cmadeo removed cmadeo as the assignee of this task.Oct 5 2023, 6:52 PM
cmadeo assigned this task to Tsevener.

@cmadeo Hmm, sorry, it could be that my hacky workaround to allow you to bypass donating in the web view is not acting well. I'll take a look and see if I can reproduce your issues and improve testing for them.

One thing to keep in mind - this is all Fundraising's web flow embedded in our web view, so we have no control over it. The only thing native we can adjust is the "Return to article" button that appears on the thank you page (which, it sounds like you can't reach, I'll look at that), and the "Thank you" toast that appears after they tap it and pop back to their previous screen. We might be able to improve your scrolling issue too.

@cmadeo There's a new Experimental build (47) with thank you bypass improvements and I schedule-slacked you a screencast of what I'm seeing. I'll move this back into your column in case you have any feedback on the thank you toast and "Return to article" button. Also if you still have trouble seeing the thank you page, let me know. I can repro your navigation bar scrolling bug - we'll try to fix that. Thanks!

Hi @Tsevener! Thanks for the clarifications. Things within the app are looking good, but I am seeing that the thank you page from the settings view is still showing “return to article” can we have it say “return to settings” if accessed from settings or update the string universally to be “Go back”?

PR that changes button to "Return" (from Settings) or "Return to article" (from article campaign) - based on requirements here https://phabricator.wikimedia.org/T333108#9221619.

https://github.com/wikimedia/wikipedia-ios/pull/4652

PR to prevent hiding of the navigation bar - https://github.com/wikimedia/wikipedia-ios/pull/4654

This should improve a bit of the scrolling weirdness in https://phabricator.wikimedia.org/T333108#9229278.