Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
The font size (which is currently hard-coded in uc_stripe.js to 24px) of the new Stripe.js Elements input is too large for small displays and results in overlapping text.
I recommend at the very least to remove this option and use the default provided by Stripe (which is 1em and works much better as a default). Or, make the "style" options an alterable thing.
Comment | File | Size | Author |
---|---|---|---|
#12 | uc_stripe-3081576-12-allow-edit-of-element-styles.patch | 3.83 KB | AndraeRay |
#6 | uc_stripe-3081576-5-allow-edit-of-element-styles.patch | 3.83 KB | AndraeRay |
#2 | uc_stripe-remove-font-size-3081576-2.patch | 350 bytes | joelstein |
Comments
Comment #2
joelstein CreditAttribution: joelstein at On Fire Media commentedHere's a patch which simply removes the hard-coded fontSize option.
Comment #3
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedThanks for catching this.
How about a (hard coded) 18px default? I tested it and it works even for a screen as small as 360px. I think that's the smallest reasonable mobile screen size. (https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide)
1em can be hard on the eyes especially since it uses the default gray from stripe.
In the future if there really is a desire to edit the settings, that can be a separate feature request.
Comment #4
joelstein CreditAttribution: joelstein at On Fire Media commentedMy opinion is that we should not hard code any style-related CSS stuff in the way this is presented, unless also making it at least alterable through a hook. 18px is still too big for my use case, at least. Also, Stripe's defaults are reasonable, if not perfect, and I think the module should use their defaults by default. :)
But, if there was a way to alter the JS options that get passed to Stripe Elements, then it would make it easier for themers to adjust the presentation to match their website design requirements.
Comment #5
AndraeRay CreditAttribution: AndraeRay as a volunteer commented@joelstein, good point.
Let me see where an alter hook can be added.
Comment #6
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedI've been able to spend some time on this, and I've created a patch.
The default font size is now 18px, and FontSize, and colors are now editable. You can even add additional styles found in the stripe docs:
https://stripe.com/docs/stripe-js/reference#element-options
You can edit the settings from the Stripe settings page.
It worked fine from my testing, but I would appreciate a second check.
Comment #7
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedComment #8
rajeev_drupal CreditAttribution: rajeev_drupal at TATA Consultancy Services for Pfizer, Inc. commentedComment #9
rajeev_drupal CreditAttribution: rajeev_drupal at TATA Consultancy Services for Pfizer, Inc. commentedTested. Working fine for me.
Comment #10
rajeev_drupal CreditAttribution: rajeev_drupal at TATA Consultancy Services for Pfizer, Inc. commentedComment #11
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedThanks for testing @rajeev_drupal
Comment #12
AndraeRay CreditAttribution: AndraeRay as a volunteer commented@joelstein, you're right. Good observation, 18px can still be too big.
I have set the default to be 1em to make it easier for everyone.
Here is a new patch, it's almost identical to the patch from #6. I'll go ahead and commit to dev branch.
Comment #13
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedComment #15
AndraeRay CreditAttribution: AndraeRay as a volunteer commentedThanks @rajeev_drupal and @joelstein
Comment #17
AndraeRay CreditAttribution: AndraeRay as a volunteer commented