如何配置Stripe信用卡字段为分离式布局样式？

要实现分离字段的信用卡输入布局，你需要替换Stripe的单字段card组件为独立的字段组件，同时调整HTML结构适配Bootstrap 4的栅格系统，具体步骤如下：

1. 修改HTML结构 #

用Bootstrap栅格系统创建三个独立的输入容器，分别对应卡号、有效期、CVC码，每个容器使用Bootstrap的表单类保证样式统一：

<div class="form-row">
  <div class="form-group col-md-6">
    <label>信用卡卡号</label>
    <div class="form-control" id="card-number-element"></div>
  </div>
  <div class="form-group col-md-3">
    <label>有效期 (MM/YY)</label>
    <div class="form-control" id="card-expiry-element"></div>
  </div>
  <div class="form-group col-md-3">
    <label>CVC码</label>
    <div class="form-control" id="card-cvc-element"></div>
  </div>
</div>

2. 调整JavaScript代码 #

不再创建统一的card元素，而是分别初始化cardNumber、cardExpiry、cardCvc三个独立组件，复用你原有的样式配置：

stripe = Stripe(publishableKey);
var elements = stripe.elements();
var style = {
  base: {
    color: "#32325d",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4"
    }
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a"
  }
};

// 初始化并挂载卡号组件
var cardNumber = elements.create("cardNumber", { style: style });
cardNumber.mount("#card-number-element");

// 初始化并挂载有效期组件
var cardExpiry = elements.create("cardExpiry", { style: style });
cardExpiry.mount("#card-expiry-element");

// 初始化并挂载CVC组件
var cardCvc = elements.create("cardCvc", { style: style });
cardCvc.mount("#card-cvc-element");

3. 额外说明 #

• 这种方式利用Stripe Elements提供的独立字段组件，完全替代单字段card组件，实现你需要的分离布局
• 保留了你原有的样式配置，确保输入框视觉风格和之前一致
• 通过Bootstrap的col-md-6、col-md-3类控制字段宽度比例，天然支持响应式布局
• 若需要处理输入错误，可给每个组件添加change事件监听，逻辑和单字段组件一致

内容的提问来源于stack exchange，提问作者user3288051