Hey Bubblers,
Two quick questions for anyone using the Stripe Element within Stripe.js. We’re getting a ton of complaints that our users either (i) can’t click to enter card details or (ii) can’t see the input field in certain devices (Android phones). As closely as we can tell, we’ve tracked these issues down to two possible causes:
- On all screens, the input field is visible, but only as tall as the text. Making the element larger only leaves more padding, but the padding isn’t clickable. Trying to place the element inside any container that formats it like other inputs means that regardless of how tall you make the element, a meaningful area within the “input” still isn’t clickable and users think the input is broken.
Example as built:
Example as Rendered (only the dark grey area is clickable):
Question 1: has anybody cracked how to make the card input as tall as you want it? Any CSS styling that could fix this issue?
- A recurring theme that’s developing is that some users can’t view the input element on Android devices. Based on work we’ve done so far, it looks like most (if not all) of these users are coming from Instagram, either directly or via a Linktree link. I know Instagram uses it’s own FB browser, so I’m wondering if anyone has come across rendering issues with the Stripe Element on Android devices in the past? If so, were you able to find a fix?
Thanks in advance for any help.
Brian