Page MenuHomePhabricator

Restyle Adyen hosted page
Closed, ResolvedPublic2 Estimated Story Points

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.

image.png (1×1 px, 211 KB)

Event Timeline

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

image.png (716×1 px, 59 KB)

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

image.png (498×725 px, 32 KB)

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:

image.png (761×649 px, 60 KB)

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

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

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

image.png (487×619 px, 26 KB)

@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:

AdyenStep2.png (576×1 px, 47 KB)

AdyenStep3.png (527×1 px, 49 KB)

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]

image.png (359×705 px, 28 KB)

Most recent screen shot I got:

[image: image.png]

image.png (445×842 px, 39 KB)

image.png (359×705 px, 28 KB)

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.

Screenshot from 2020-09-10 18-50-17.png (466×638 px, 41 KB)

Change 623853 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Add css changes for adyen redirect skin

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