为什么 Stripe Element 不能在 iphone 上运行，但在 Android 和桌面上运行良好？

Question

我正在使用 Stripe Element 的集成来捕获付款并在我的 phonegapp 应用程序中创建费用。一切都在 HTTPS 上进行测试和托管。在台式机和 Android 设备上，我可以付款并输入我的信用卡信息。然而，在 iPhone 上，输入字段甚至不会出现。我该如何解决这个问题？

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>

iPhone 截图：

Answer 1

找到了解决方案。我需要提到我创建的应用程序是使用 PhoneGap Build 构建的。我没有iphone，但我工作的客户有。所以我们参加了电话会议，让他在他的手机和笔记本电脑上激活远程调试，这样我就可以在 Safari 的网络检查器中看到错误。您确实需要一部 iphone 和一部 mac 才能至少能够看到错误。

这是我解决此问题所遵循的步骤： - 第一个activate remote debugging

在 Safari 的 Web Inspector 中，错误消息是：

无法向https://js.stripe.com 发布消息。收件人有原始文件：//

这个问题基本上是由 WebView 触发的。为了解决这个问题，我不得不将 config.xml 中对条带的 https 访问列入白名单

这就是 config.xml 的样子：

<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/*"/>