Page MenuHomePhabricator

Adyen Hebrew UI bugs
Closed, ResolvedPublic2 Story Points

Description

From Amir's testing:

The initial name and email form is nearly perfect, but it has some little issues:

  • The lock icon next to the "Billing information" title is too close to the text. See the screenshot. It has some padding in English, so in the Hebrew version it probably has padding on the wrong side.
  • The "ILS" code is correct and standard, but it is rarely used in Israel this way. It should be replaced with the the shekel sign "₪" or the Hebrew abbreviation "ש״ח". These will be much easier to understand. If I inspect the #selected-amount in the browser developer tools and replace "ILS" with "₪", it looks perfect.

The credit card number form that opens next has a few issues:

  • The green label next to the CVV field is broken and hard to read. It's a link that is supposed to help, but it can only add more confusion. Making the #card.cvcWhatIs element explicitly dir="rtl" would make it much better.
  • Also, the #card.cvcWhatIs element breaks to the next line. It would be nice to ensure that it appears in one line. See the screenshot.
  • It's best of all not to pre-fill the card holder name. In Israel people will are likely to write the name int he top form in Hebrew, but the credit card holder name in English. To avoid confusion, don't prefill. And it's OK that this filled is LTR.
  • It is also OK that the card number and the CVV input fields are LTR. They must remain LTR in any case.
  • The fact that the whole form has LTR orientation doesn't make it unusable, but it does it make it ugly :) Last year it looked perfect, so it would be nice to make it perfectly RTL this year, too.

Details

Related Gerrit Patches:
mediawiki/extensions/DonationInterface : masterFix CSS selector in Adyen iframe
mediawiki/extensions/DonationInterface : masterAdyen iframe CSS for RTL languages
mediawiki/extensions/DonationInterface : masterPull out some inline styles

Event Timeline

DStrine created this task.May 16 2016, 6:12 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptMay 16 2016, 6:12 PM
Restricted Application added a project: I18n. · View Herald TranscriptMay 16 2016, 6:16 PM

adding screenshots


Change 289002 had a related patch set uploaded (by Ejegg):
Adyen iframe CSS for RTL languages

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

Change 289083 had a related patch set uploaded (by Ejegg):
Pull out some inline styles

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

Ejegg added a comment.EditedMay 17 2016, 12:57 AM

The CSS for Adyen's iframe has been updated to fix a chunk of these problems. If you need to reload the iframe, it should be fine to re-submit the initial POST.

The CSS for the stuff outside the iframe is in review, and we're figuring out what rules we should have for showing and auto-filling the donor name field (see T124467).

Change 289083 merged by jenkins-bot:
Pull out some inline styles

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

Change 289002 merged by jenkins-bot:
Adyen iframe CSS for RTL languages

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

Ejegg added a subscriber: Amire80.May 24 2016, 4:11 AM

@Amire80, if you have some time to take another look at this, it would be great to hear your feedback. We've deployed some changes, and I think I was able to address everything except the auto-filled cardholder name.

Change 291149 had a related patch set uploaded (by Ejegg):
Fix CSS selector in Adyen iframe

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

DStrine closed this task as Resolved.Jun 8 2016, 10:48 PM
DStrine set the point value for this task to 2.

Change 291149 merged by jenkins-bot:
Fix CSS selector in Adyen iframe

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