Why is Stripe Element not working on iphone but working fine on Android and Desktop?

Question

I'm using an integration of Stripe Element to capture payments and create charges in my phonegapp app. Everything is tested and hosted on HTTPS. On desktop and Android devices I'm able to pay and enter my credit card information. On iPhone however, the input fields do not even appear. How do I fix this?

js

<!--stripe--> 
 <script>
  //stripe checkout with elements
  // Create a Stripe client.
  var app_mode = 0;//0 = dev 1=prod

  if(app_mode===0){
  var stripe = Stripe('pk_test_xxxxx');
  }else{
  var stripe = Stripe('pk_live_xxxxx');
  }
  // Create an instance of Elements.
  var elements = 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',
      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 = '';
    }
  });

  // Handle form submission.
  var form = document.getElementById('book_cleaning_button');
  form.addEventListener('click', function(event) {
    event.preventDefault();

    stripe.createToken(card).then(function(result) {
      if (result.error) {
        // Inform the user if there was an error.
        var errorElement = document.getElementById('card-errors');
        errorElement.textContent = result.error.message;
      } else {
        // Send the token to your server.
        stripeTokenHandler(result.token);
      }
    });
  });

  // Submit the form with the token ID.
  function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    // Submit the form
    //form.submit();
  }
  </script>

Screenshot from iPhone :

Answer 1

Found the solution. I need to mention the app I created was built with PhoneGap Build. I don't have an iphone but the client I work for does. So we jumped on a conference call and had him activate remote debugging on his phone and his laptop so that I could see the errors in web inspector in Safari. You do need an iphone and a mac to at least be able to see the errors.

Here the steps I followed to fix this : - First activate remote debugging

In Safari's Web Inspector Error message was :

Unable to post message to https://js.stripe.com. Recipient has origin file://

The issue is basically triggered by WebView. To fix this, I had to whitelist https access to stripe in config.xml

This is what config.xml looks like :

<plugin name="cordova-plugin-whitelist" spec="1" />
  <access origin="*" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <allow-intent href="tel:*" />
  <allow-intent href="sms:*" />
  <allow-intent href="mailto:*" />
  <allow-intent href="geo:*" />
  <!-- White list https access to Stripe-->
<allow-navigation href="https://*stripe.com/*"/>
<allow-navigation href="https://*js.stripe.com/*"/>