如何解决无法通过 CSS 将 Stripe 元素居中
我正在使用 Stripe 创建付款表单,但无法在页面中央显示表单元素。
这是我的简单表格:
<div class="panel">
<form action="payment.PHP" method="POST" id="paymentFrm">
<div class="panel-body">
<!-- Payment form -->
<div class="form-group">
<label>CARD NUMBER</label>
<div id="card_number" class="c"></div>
</div>
<div class="form-group">
<label>EXPIRY DATE</label>
<div id="card_expiry" class="field"></div>
</div>
<div class="form-group">
<label>CVC CODE</label>
<div id="card_cvc" class="field"></div>
</div>
<button type="submit" class="btn btn-success" id="payBtn">Submit Payment</button>
</div>
<div id="paymentResponse"></div>
</form>
这是我用来创建条纹元素的 JS:
<script src="https://js.stripe.com/v3/"></script>
<script>
// Create an instance of the Stripe object
// Set your publishable API key
var stripe = Stripe('<?PHP
echo 'pk_test_@'; ?>');
// Create an instance of elements
var elements = stripe.elements();
var style = {
base: {
fontWeight: 400,fontFamily: 'futurabold',fontSize: '16px',lineHeight: '1.4',display: 'flex',color: '#555',backgroundColor: '#fff','::placeholder': {
color: '#888',},invalid: {
color: '#eb1c26',}
};
var cardElement = elements.create('cardNumber',{
style: style
});
cardElement.mount('#card_number');
var exp = elements.create('cardExpiry',{
'style': style
});
exp.mount('#card_expiry');
var cvc = elements.create('cardCvc',{
'style': style
});
cvc.mount('#card_cvc');
// Callback to handle the response from stripe
function stripetokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
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();
}
我尝试更改 form-group 类的 'text-align' CSS 属性,但这导致文本元素显示在中心,而 Stripe 输入元素保留在左侧:
<div class="form-group" style="text-align: center;">
更改 JS 样式变量也没有帮助:
var style = {
base: {
text-align: center}}
解决方法
可以使用 .StripeElement CSS 选择器对表单进行样式设置:
.StripeElement {
background-color: white;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
,
这取决于页面的布局方式。您没有提供太多关于页面上使用的其他样式的信息,我们也没有工作示例。
我相信您可能正在寻找 margin: 0 auto;
这用于将块元素与定义的 width
或 max-width
居中对齐。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。