Page MenuHomePhabricator

Payments forms restyle
Closed, ResolvedPublic


There are various inconsistencies and problems with the current payments form styles. This is an attempt to make them more consistent:

  • between desktop and mobile devices (currently they are very different)
  • inside and outside the vendor iframes
  • with the landing pages used for emails
  • with OOUI form styles

and fix a few other issues:

  • make <select> styling match other fields
  • ensure card logos are correctly scaled within buttons
  • make continue/pay button more prominent

Screenshots taken with Chrome, but testing in Firefox, IE, and Safari (desktop and mobile) gave similar results.

Ingenico desktop
current ingenico US desktop 2.png (2×2 px, 449 KB)
new ingenico US desktop 2.png (2×2 px, 437 KB)
Ingenico mobile
current ingenico US mobile 2.png (2×750 px, 245 KB)
new ingenico US mobile 2.png (2×750 px, 247 KB)
Adyen desktop
current adyen FR desktop 2.png (2×2 px, 446 KB)
new adyen FR desktop 2.png (2×2 px, 447 KB)
Adyen mobile
current adyen FR mobile 2.png (2×750 px, 227 KB)
new adyen FR mobile 2.png (2×750 px, 234 KB)

Unfortunately it's not possible to give these a fair A/B test, since we can't test the styles within the iframes. I think the best move is to rollout the changes either before or during Big English, and then just keep a close eye on conversion rates before and after.

Can members of fr-online please take a look at these and add any feedback?

Event Timeline

Change 393096 had a related patch set uploaded (by Pcoombe; owner: Pcoombe):
[mediawiki/extensions/DonationInterface@master] Restyle payments forms

A few more screenshots:

iDEAL desktop
current ideal desktop.png (857×1 px, 135 KB)
new ideal desktop.png (901×1 px, 126 KB)
iDEAL mobile
current ideal mobile.png (1×750 px, 164 KB)
new ideal mobile.png (1×750 px, 162 KB)
Astropay credit card desktop
current astropay cc desktop.png (2×2 px, 460 KB)
new astropay cc desktop.png (1×1 px, 169 KB)
Astropay credit card mobile
current astropay cc mobile.png (2×750 px, 280 KB)
new astropay cc mobile.png (2×750 px, 272 KB)

Change 393096 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Restyle payments forms