0
我一直在使用Bootstrap 4 beta和Stripe.js v3。如果你不熟悉Stripe.js的這個更新版本，它基本上是將iframe插入到跨度中，並使跨度像表單輸入一樣工作。我並不喜歡這個想法，但它應該更符合PCI的舊版本Stripe.js（v2）。需要雙擊自動對焦的Stripe.js v3元素（但只限於iPad/iPhone）
演示在這裏：https://codepen.io/skunkbad/pen/BdgYmY
減小HTML下降到什麼代表我的信用卡輸入如下所示：
<span id="card-number" class="form-control">
<!-- iframe is injected here by Stripe.js -->
</span>
由於從引導4 CSS樣式，這span.form控制有顯示「flex」，我必須改變這一點，否則我看不到我在該字段中輸入的內容。
#card-number.form-control {
display:block;
}
這結束了工作正常，所有我已經試過的瀏覽器：
- 的Firefox在Ubuntu 16.04
- 鉻在Ubuntu 16.04
- 上的Internet Explorer的Windows 8.1
- 鉻on Android N Phone
- 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>
這裏只有這麼多的人可以做的改變風格和條紋元素的字體，但我又覺得這個問題是從引導4的CSS到來。我已經嘗試了跨度的樣式，但沒有成功。
所以我的問題是，我可以對我的CSS做出哪些具體的改變，讓iPad和iPhone用戶可以像其他人一樣點擊一次？