为什么Stripe Element在iPhone上无法正常运行,而在Android和台式机上却可以正常运行?

时间:2020-02-04 03:33:59

标签: javascript html ios stripe-elements

我正在使用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的屏幕截图: enter image description here

1 个答案:

答案 0 :(得分:2)

找到了解决方案。我需要提到我创建的应用是使用PhoneGap Build构建的。我没有iPhone,但我为之工作的客户端却有。因此,我们跳了电话会议,让他在手机和笔记本电脑上激活远程调试,这样我就可以在Safari中查看Web检查器中的错误。您确实需要使用iPhone和Mac才能至少看到错误。

这是我要解决的步骤: -首先activate remote debugging

在Safari的Web检查器中,错误消息为:

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

该问题基本上是由WebView触发的。要解决此问题,我必须将{@ {1}}

中的条纹的https访问权限列入白名单

这是config.xml的样子:

from microbit import *
import neopixel
import time
from utime import ticks_us, sleep_us

np = neopixel.NeoPixel(pin13, 12) 
headlight = (150,150,100)
rearlight = (180,0,0)
reversinglight = (50,50,50)
indicator = (255,80,0)

def sonar():
    pin15.write_digital(1)
    sleep_us(10) 
    pin15.write_digital(0)
    pin15.set_pull(SONAR.NO_PULL)
    while pin15.read_digital() == 0:
        pass 
    start = ticks_us() 
    while pin15.read_digital() == 1:
        pass 
    end = ticks_us()
    echo = end-start 
    distance = int(0.01715 * echo)
    return distance 

def forover():
    pin1.write_analog(500)
    pin12.write_digital(0)
    pin0.write_analog(500)
    pin8.write_digital(0)

    np[9]  = headlight
    np[3]  = headlight
    np[5]  = headlight
    np[4]  = headlight
    np[10]  = headlight
    np[11]  = headlight
    np.show() 

    while True: 
        np[0]  = indicator
        np[1]  = indicator
        np[6]  = indicator
        np[7]  = indicator 
        np.show() 
        sleep(600)
        np[0]  = (0,0,0)
        np[1]  = (0,0,0)
        np[6]  = (0,0,0)
        np[7]  = (0,0,0)
        np.show() 
        sleep(600)

def reverse(): 
    pin1.write_analog(200) 
    pin12.write_digital(1) 
    pin0.write_analog(200) 
    pin8.write_digital(1) 

    np[5]  = rearlight
    np[4]  = rearlight
    np[11]  = rearlight
    np[10]  = rearlight
    np[9]  = reversinglight
    np[8]  = reversinglight
    np[3]  = reversinglight
    np[2]  = reversinglight
    np.show()

    while True:
        pin14.write_digital(1)
        np[0]  = indicator
        np[1]  = indicator
        np[6]  = indicator
        np[7]  = indicator
        np.show()
        sleep(600)
        np[0]  = (0,0,0)
        np[1]  = (0,0,0)
        np[6]  = (0,0,0)
        np[7]  = (0,0,0)
        np.show()
        pin14.write_digital(0) 
        sleep(600)

while True:
    if sonar() <= 5:
        reverse()
    else:
        forover()