无法通过 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}}

如何设置 Stripe 元素的样式，使其显示在页面中央？

解决方法

可以使用 .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 居中对齐。