我一直在使用 Bootstrap 4 beta 和 Stripe.js v3。如果您不熟悉这个较新版本的 Stripe.js,它基本上是将 iframe 注入到 span 中,并使 span 的行为就像它们是表单输入一样。我不喜欢这个想法,但据说它比旧版本的 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 上的火狐
- 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 用户像其他人一样简单地单击一次?