Recently, I've been experimenting with Bootstrap 4 beta and Stripe.js v3. Unlike the older version of Stripe.js, this newer one works by injecting iframes into spans and making them act as form inputs. While it claims to be more PCI compliant, I'm not completely sold on the approach.
For a demonstration, you can check out the following link: https://codepen.io/skunkbad/pen/BdgYmY
To simplify things, here's the reduced HTML code that represents my credit card input:
<span id="card-number" class="form-control">
<!-- iframe is injected here by Stripe.js -->
</span>
Due to the default CSS styles in Bootstrap 4, the span.form-control has a display property set to "flex". To address this issue, I had to override it by setting the display to "block".
#card-number.form-control {
display:block;
}
Fortunately, this adjustment seems to work well across various browsers:
- Firefox on Ubuntu 16.04
- Chrome on Ubuntu 16.04
- Internet Explorer on Windows 8.1
- Chrome on Android N Phone
- Safari on iPad
- Safari on iPhone
However, when testing on iOS devices like iPad and iPhone, users need to double-tap the field to focus and start typing. Interestingly, the Stripe.js Elements demo on the official website doesn't exhibit this behavior, leading me to believe it might be related to Bootstrap 4's CSS styling.
You can find the complete code below for your testing purposes:
... (most of the original code follows)While attempting to tweak the styles or fonts of the Stripe Elements, there are limitations to what can be changed. My assumption is that the issue lies within the CSS rules of Bootstrap 4. Despite trying various modifications to the span styles, the problem persists.
Hence, my query is centered around pinpointing specific CSS adjustments that would enable iPad and iPhone users to interact seamlessly with a single tap, just like other devices. Any insights or suggestions are greatly appreciated!