Restyle Adyen hosted page
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

As a donor, I would like to see a simple and approachable credit card payment UI so that I can easily make a donation.

This task is to edit the adyen hosted page.

DoD:

strip out or hide the Step 1 text
Hide all the card icons
remove the lower text "Next step:..."
remove or hide the "previous" button
Spend 1 hour seeing if you can copy over the styling for the fields from the iframe variant

When this is done, do not push it live yet. Add a screen shot here and ping @DStrine to schedule a review. We will most likely ship this version but we want to have a chat with however does this to understand how hard this was. Any further edits will be in other tasks.

Details

Project	Branch	Lines +/-	Subject
mediawiki/extensions/DonationInterface	master	+7 -2	Add css changes for adyen redirect skin
mediawiki/extensions/DonationInterface	master	+5 -5	Revert "Send donors to details instead of pay"
mediawiki/extensions/DonationInterface	master	+5 -5	Send donors to details instead of pay

Customize query in gerrit

Related Objects

Mentioned In: T266172: enAUNZ pre-test on October 22

Event Timeline

DStrine created this task.Aug 26 2020, 8:55 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 26 2020, 8:55 PM

DStrine merged a task: T260749: "Previous" navigation button does not work on Adyen payment form.Aug 31 2020, 2:10 AM

DStrine added subscribers: jbolorinos-ctr, jgleeson, XenoRyet and 3 others.

DStrine moved this task from Triage to Sprint O July 20th to August 6th on the Fundraising-Backlog board.Aug 31 2020, 5:26 PM

DStrine set the point value for this task to 2.Sep 1 2020, 8:04 PM

DStrine moved this task from Sprint O July 20th to August 6th to Current Sprint on the Fundraising-Backlog board.

DStrine added a project: Fundraising Sprint Raw data never hurt anyone.Sep 1 2020, 8:30 PM

DStrine triaged this task as High priority.Sep 1 2020, 9:52 PM

Hmm so I thought the editing interface would be more like Ingenico's. I'm not totally clear yet on how to remove fields. I assume we can upload or edit css somewhere though.

As we explore this, it looks like we might be going to wrong page--the test form sends us to details.html and it has a lot of the changes we would want.

Change 623846 had a related patch set uploaded (by Mepps; owner: Mepps):
[mediawiki/extensions/DonationInterface@master] Send donors to details instead of pay

https://gerrit.wikimedia.org/r/623846

gerritbot added a project: Patch-For-Review.Sep 2 2020, 6:09 PM

The change above gets us to a form that looks like this.

Here's how it looks now in test. Next steps are to test the ideal form (done) and check the new skin code into git (done).

Also this might be a separate task but we don't have a link to Adyen ideal on the vagrant payments wiki home screen.

This is how it looks for ideal:

Change 623853 had a related patch set uploaded (by Mepps; owner: Mepps):
[mediawiki/extensions/DonationInterface@master] Add css changes for adyen redirect skin Note I'm not sure how to get rid of the carriage returns

https://gerrit.wikimedia.org/r/623853

Change 623846 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Send donors to details instead of pay

https://gerrit.wikimedia.org/r/623846

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.8; 2020-09-08).Sep 4 2020, 1:00 AM

From @DStrine, the next step here is removing the smaller "Next step" text.

@DStrine, here's the latest without the next step text.

@MBeat33 @Ppena @spatton @EMartin @scervantes Check out the latest screen shot here. This is a striped down version we could release today. I'll try syncing up with as many of you as I can. If we don't want to release today, then I'd wait until Monday. I will be communicating this on other channels too.

Looks great and vastly improved! Can I test before we put it live?

fr-tech can verify locally but no one else can do any sanity check before it goes live.

Ok. I'll give it a quick run through once it is deployed.

No blockers from DS, just let us know before it goes live so we can both test and watch the front of the Zendesk queue for any issues.

This is deployed, but there does seem to be a step 3 added now:

FYI for all. This is getting reverted.

I published the latest skin to live from the Adyen side and now step 2 looks a lot better but there's still a step 3.

Screenshot from 2020-09-10 17-51-26.png (399×534 px, 29 KB)

Will revert the pay/details patch.

Change 626512 had a related patch set uploaded (by Ejegg; owner: Ejegg):
[mediawiki/extensions/DonationInterface@master] Revert "Send donors to details instead of pay"

https://gerrit.wikimedia.org/r/626512

Change 626512 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Revert "Send donors to details instead of pay"

https://gerrit.wikimedia.org/r/626512

I just tested it and it looks great! Thank you FRTech!

I'm not sure what you just tested but we're not done. I don't think anyone wants multiple steps on the adyen side.

Hi All,

Here's what I'm seeing on FR Donate wiki - looks good...??

[image: image.png]

Most recent screen shot I got:

[image: image.png]

After rolling back @mepps's DonationInterface change and leaving the updated skin on Adyen Live, I see a cleaned up one-step form. Still has some logos we might not want.