Stripe Elements malfunctioning

I have implemented Stripe Elements to collect credit card. The UI components are an iframe managed set of inputs that collect credit card number, month, year, and CVC. The component works great in my ionic 3 application in the browser but when running on ios phone the keyboard jumps up and down and the cursor goes to the wrong location often.

In order to conform with the latest PCI requirements we have to use Stripe Elements or Checkout.

Anyone have any idea how to stabilize this component?

1 Like

You have to provide a bit more information:
What is the link to some documentation on this Stripe Elements?
How exactly are you testing? What commands did you run?
What is your ionic info output?

Does this “Stripe Elements” thing work in normal Safari on an iPhone?

Stripe Elements link: https://stripe.com/docs/elements

Thanks for the feedback. I tested by generating a new ionic project and a new page and inserting the code Stripe specified above.
When the stripe code is inserted you end up with an iframe hosted by Stripe. That is the new way to be PCI compliant. You cannot collect CC data yourself, you have to let them do it. They have done this by creating an iframe with input fields and validation.

    @ionic/cli-utils  : 1.9.0
    ionic (Ionic CLI) : 3.9.0

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

System:

    Node : v6.11.2
    npm  : 4.6.1
    OS   : Windows 10

I added
to index.html,
Here is the html (it’s a component):

<div >
  thisis the stripe-payment component.
  <form action="/charge" method="post" id="payment-form">
    <div class="form-row">
      <label for="card-element">
        Credit or debit card V2:
      </label>
      <div id="card-element">
        <!-- a Stripe Element will be inserted here. -->
      </div>
      <!-- Used to display form errors -->
      <div id="card-errors" role="alert"></div>
    </div>

    <!--<button>Submit Payment</button>-->
  </form>
</div>


The corresponding .ts file is:

ngOnInit() {

// Create an instance of Elements
var elements = this.stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    lineHeight: '24px',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function (event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

How are you testing this? ionic serve, ionic cordova run ios?
Does it work if you add this to a normal website and open it in mobile Safari or same behaviour?

It works fine on a browser using ionic serve, when running on a iphone or simulator it breaks. The above video is from running the ionic app in the xcode ios simulator. If I install the app on a phone with Testflight, same bad result. If I go to safari on the same phone and go to Stripe’s elements demo it works fine.

Ok, so the problem is probably with Cordova and its Webview that displays the app in the native app on devices and simulators.

Can you maybe upload your app via ionic upload and test in Ionic View? Might be interesting what happens there. (Maybe even post the ID here so we all can try and see it in action? The gif is not optimal [although kudos for creating it!])

It works perfect in Ionic View

Ok, that is strange and unexpected. Hmm…

Hi!
I have a very similar issue that I entirely described here: Stripe Element: keyboard bug with iOS

Note that I’m not using Cordova at all.
It works perfectly on web browser, on android devices, but never in iOS (tested in safari and chrome)

I am in touch with Stripe support team which tries to find workaround, but nothing for now.
Any news from ionic team ? Should we open an issue? Thanks.

I gave up and did my own form and dropped back to StripeV2 js

Hey @heycoach
Someone found a workaround on Stack Overflow: https://stackoverflow.com/questions/46592848/ionic-and-stripe-elements-keyboard-bug-with-ios/46720755#46720755

I tested it successfully, and added the specific answer for Angular/Ionic :slight_smile:

1 Like

Please share code used. Mine is not running on device with WKWebView due to XHR CORS issue as Stripe tries to post to api.stripe.com/v1/tokens.

Using UIWEBVIEW, the card component does not load and fails silently😟 but works fine under ionic serve.

You need to add:

 <allow-navigation href="https://js.stripe.com" />

to your config.xml file. This will allow the app to reach out to stripe and get the js file.