Page MenuHomePhabricator

Optimization of Apple Pay Flow
Open, MediumPublic

Description

DoD:

  • spend one hour just checking if this works locally and report back here.

FrTech, a few of us were discussing the Apple Pay flow. There are currently two clicks on an Apple Pay button required to get to the Apple Pay checkout which can be viewed on the Apple Pay tab in this workbook https://docs.google.com/spreadsheets/d/1Sah7uDHG3yktxnEi5nI-TkpBm4gu0jDO5pjkDq9F8A8/edit#gid=662051667. The desire is to reduced the flow if possible to one click on the Apple Pay button to get to payment details. Is this possible?

Further to the internal observations, we are trying to initiate co-marketing activities with Apple and they can't endorse Wikimedia in their marketing efforts unless we optimize our flow as follows (from Apple):

  1. For Apple Pay, a better user experience, which will convert at a higher rate, is simply to move the ‘Donate with Pay’ button up to the page where the user is selecting their donation denomination.. (Currently it seems that you’re taking the use to a new page so that amazon pay or paypal can then run their pop-ups/redirects.) Apple Pay is more integrated into the OS, so you don’t need this extra step. Moving it up one page and defaulting to Apple Pay (i.e. showing it first) for Apple Pay users will lead to higher donation rates. We see this time and again across different transaction experiences.

Apple Pay is also currently below the fold on the web page. We highly recommend moving it up to be the first option for iOS and macOS users. See first image below.

  1. On mobile web the ‘Donate with Pay’ button (and the ‘Donation amount’ text) doesn’t appear to be centered on the page, or sized appropriately. See second image below. (Of course, if you move the button up one screen, this won’t be an issue.)

I don't expect us to yield to Apple's requirements but raising this for input on what may be possible in optimizing since we internally had similar thoughts. Thanks

Event Timeline

  1. we can't do Apple Pay payments on donate.mediawiki.org because it's hosted outside of our PCI cluster and doing payments would need our Adyen credentials and our private Apple Pay merchant cert. Is there a way to automatically trigger a click on the Apple Pay button when a donor is redirected to payments.wikimedia.org?
  1. we can't do Apple Pay payments on donate.mediawiki.org because it's hosted outside of our PCI cluster and doing payments would need our Adyen credentials and our private Apple Pay merchant cert. Is there a way to automatically trigger a click on the Apple Pay button when a donor is redirected to payments.wikimedia.org?

We could try adding an extra query param to the donatewiki redirectPayment() call for Apple Pay links to indicate to payments that we'd like to call component.submit() on load, '?oneclick=true' maybe?

We'd have to make sure the component was mounted before we call submit() so we could try wrapping that in something like an onReady() check (I can see that event in Drop-in but not in Web Components). that would then behave similarly to the Paypal flow.

DStrine triaged this task as Medium priority.Jan 18 2022, 10:07 PM

I looked into this and it doesn't look straightforward.

I spent longer than the hour allocated trying to work around Apple Pay's requirement for the user to psychically "click" the Apple Pay button with no success.