Add LTR mark for credit card and expiry payform fields

ddayguerrero commented 6 years ago

Fixes #41

Changes

Make use of the LTR mark to set the way credit card values and expiry dates are displayed with respect to RTL direction.
Typing this test AMEX credit card number ‎3782 822463 10005 will be displayed as is instead of 10005 822463 3782.

Why introduce these changes?

Allow users to view expect RTL directionality behaviour in their applications.

How is this achieved?

Verify if an HTML right-to-left indicator exists and prepend the LTR mark U+200E to the target's value after setting the target element's value in the reFormatCardNumber() and reFormatExpiry() functions.

⚠️ For now, this fix will search for the global dir attribute. We could check for directionality within individual elements shall developers decide on specifying RTL on <input> elements instead of on<html>. (May change depending on if you feel comfortable deploying the suggested change on event normalization) ⚠️

arthurgouveia commented 6 years ago

I was able to test it on my machine and it indeed works.

jondavidjohn commented 6 years ago

@ddayguerrero I agree with @arthurgouveia's assessment on condition order above, otherwise, this looks good!

jondavidjohn / payform