Question

我一直在使用Bootstrap 4 beta和Stripe.js v3。如果您不熟悉这个较新版本的Stripe.js，它基本上是将iframe注入跨距，并使跨距表现为形式输入。我并不喜欢这个想法，但据说它与旧版本的Stripe.js（v2）更符合PCI。

在这里演示：https://codepen.io/skunkbad/pen/BdgYmY

将HTML降低到代表我的信用卡输入的内容如下所示：

<span id="card-number" class="form-control">
    <!-- iframe is injected here by Stripe.js -->
</span>

由于Bootstrap 4的CSS样式，这个span.form-control显示为“flex”，我必须更改它，否则我看不到我在字段中键入的内容。

#card-number.form-control {
    display:block;
}

这最终适用于我尝试过的所有浏览器：

Ubuntu 16.04上的Firefox
Ubuntu 16.04上的Chrome
Windows 8.1上的Internet Explorer
Android N手机上的Chrome
iPad上的Safari
iPhone上的Safari

但是在我试过的IOS设备（iPad和iPhone）上，我必须双击该字段才能获得焦点并开始输入。 Stripe网站上的Stripe.js Elements演示没有这个问题，所以我假设它与Bootstrap 4的CSS有关。

测试享受的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Stripe.js v3 with Bootstrap 4 (beta) Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <style>
    /* Blue outline on focus */
    .StripeElement--focus {
      border-color: #80BDFF;
    }
    /* Can't see what I type without this */
    #card-number.form-control,
    #card-cvc.form-control,
    #card-exp.form-control {
      display:block;
    }
  </style>
</head>
<body>

  <div class="container-fluid">
    <h1 class="mt-5">Stripe.js v3 with Bootstrap 4 (beta) Test</h1>
    <div id="card-errors" role="alert"></div>
    <div class="card">
      <div class="card-body">
        <form id="payment-form">
          <div class="form-group">
            <label for="name">Name on Card</label>
            <div class="input-group">
              <span class="input-group-addon">A</span>
              <input type="text" class="form-control" id="name">
              <span class="input-group-addon">B</span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-number">Credit Card Number</label>
            <div class="input-group">
              <span class="input-group-addon">C</span>
              <span id="card-number" class="form-control">
                <!-- Stripe Card Element -->
              </span>
              <span class="input-group-addon">D</span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-cvc">CVC Number</label>
            <div class="input-group">
              <span class="input-group-addon">E</span>
              <span id="card-cvc" class="form-control">
                <!-- Stripe CVC Element -->
              </span>
            </div>
          </div>
          <div class="form-group">
            <label for="card-exp">Expiration</label>
            <div class="input-group">
              <span id="card-exp" class="form-control">
                <!-- Stripe Card Expiry Element -->
              </span>
              <span class="input-group-addon">F</span>
            </div>
          </div>
          <button id="payment-submit" class="btn btn-primary">Submit Payment</button>
        </form>
      </div>
    </div>
  </div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
  $(document).ready(function(){

    // Create a Stripe client
    var stripe = Stripe('pk_test_A45s2laXHrCRj6Tow44dk67z');

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

    // Try to match bootstrap 4 styling
    var style = {
      base: {
        'lineHeight': '1.35',
        'fontSize': '1.11rem',
        'color': '#495057',
        'fontFamily': 'apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'
      }
    };

    // Card number
    var card = elements.create('cardNumber', {
      'placeholder': '',
      'style': style
    });
    card.mount('#card-number');

    // CVC
    var cvc = elements.create('cardCvc', {
      'placeholder': '',
      'style': style
    });
    cvc.mount('#card-cvc');

    // Card number
    var exp = elements.create('cardExpiry', {
      'placeholder': '',
      'style': style
    });
    exp.mount('#card-exp');

    // Submit
    $('#payment-submit').on('click', function(e){
      e.preventDefault();
      var cardData = {
        'name': $('#name').val()
      };
      stripe.createToken(card, cardData).then(function(result) {
        console.log(result);
        if(result.error && result.error.message){
          alert(result.error.message);
        }else{
          alert(result.token.id);
        }
      });
    });

  });
</script>
</body>
</html>

只有很多人可以改变条纹元素的样式和字体，但我认为问题来自Bootstrap 4的CSS。我试图摆弄跨度的风格，但没有成功。

所以我的问题是，我可以对我的CSS进行哪些具体更改，让iPad和iPhone用户只需像其他人一样点击一次？

Answer 1

好吧，我弄清楚了，或者至少我认为我弄明白了。我只是将显示类型从块更改为内联块，而IOS Safari似乎更开心。

#card-number.form-control {
    display:inline-block;
}

我不确定为什么阻止不起作用，因为它对我使用的所有其他设备都有效...但它就是它。

Stripe.js v3元素需要双击才能对焦（但仅限于iPad / iPhone）

1 个答案: