Stripe Element: keyboard bug with iOS


#1

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


Stripe Elements malfunctioning
#2
  • 1 I am having the same issue here too its frustrating! anyone know a solution?

#3

Yep. Right here: https://stackoverflow.com/questions/46592848/ionic-and-stripe-elements-keyboard-bug-with-ios/46720755#46720755