为什么 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 中的 Web 检查器中看到错误。您确实需要一台 iPhone 和一台 Mac 才能至少看到错误。

这是我修复此问题所遵循的步骤： - 首先激活远程调试

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

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

该问题基本上是由WebView触发的。为了解决这个问题，我必须将 https 访问列入白名单config.xml

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