问题
I've been working with Bootstrap 4 beta and Stripe.js v3. If you're not familiar with this newer version of Stripe.js, it's basically injecting iframes into spans, and making the spans act as if they are form inputs. I'm not in love with the idea, but it's supposedly more PCI compliant that the older version of Stripe.js (v2).
Demo here: https://codepen.io/skunkbad/pen/BdgYmY
Reducing the HTML down to what represents my credit card input looks like this:
<span id="card-number" class="form-control">
<!-- iframe is injected here by Stripe.js -->
</span>
Due to CSS styles from Bootstrap 4, this span.form-control has a display of "flex", and I have to change that or I can't see what I type into the field.
#card-number.form-control {
display:block;
}
This ends up working fine for all of the browsers I have tried:
- Firefox on Ubuntu 16.04
- Chrome on Ubuntu 16.04
- Internet Explorer on Windows 8.1
- Chrome on Android N Phone
- Safari on iPad
- Safari on iPhone
But on the IOS devices that I've tried (iPad and iPhone), I have to double tap the field to get focus and start typing. The Stripe.js Elements demo on the Stripe website doesn't have this problem, so I'm assuming it's related to Bootstrap 4's CSS.
Full code for your testing enjoyment:
<!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>
There's only so much one can do to alter the styles and fonts of the Stripe Elements, but again I think the problem is coming from Bootstrap 4's CSS. I've tried fiddling around with the styles of the span, but without success.
So my question is, what specific changes can I make to my CSS that would allow iPad and iPhone users to simply click once like everyone else?
回答1:
Well, I figured it out, or at least I think I figured it out. I just changed the display type from block to inline-block, and IOS Safari seems a lot happier.
#card-number.form-control {
display:inline-block;
}
I'm not sure why block wouldn't work, because it did for all the other devices I used ... but it is what it is.
来源：https://stackoverflow.com/questions/46110842/stripe-js-v3-elements-requiring-double-tap-to-focus-but-only-on-ipad-iphone