Stripe introduced a new way to collect credit cards information named Stripe Elements.
Roughly speaking, it consists on letting Stripe propose an UI for collecting credit cards.
For now, it works perfectly, except I found a very annoying bug, in iOS only:
When focusing the credit card number, a keyboard appears (seems to be the native one), then it is replaced by the ionic one 0,5 second after, as showed bellowed:
That would not be a problem usually.
But then, if I press “back” button, I go to the previous page but the keyboard stays! Even if I close the keyboard, it will reopen forever as soon as I go to a new page, or if I open the menu… my UI is broken.
I have the intuition there is a conflict between the ionic keyboard triggered on any input, and the native keyboard triggered by Stripe code.
But due to the nature of stripe Elements, I can’t control the content of the form, I only have pretty much this in the html code:
<form action="/charge" method="post" id="payment-form"> <div class="form-row"> <div id="card-element"> <!-- a Stripe Element will be inserted here. --> </div> .... </form>
Any idea how to try to debug this?
Do you think I could tell to Ionic not to trigger the keyboard?
Thanks a lot.
Notes : I’m using ionic-angular 3.7.1