如何在Stripe中自定义信用卡表单？

Question

我正在使用 Stripe 配置支付网关，我有一个基本结构，您可以看到您可以在javascript代码中添加样式，但不能构建HTML的结构} form以下代码的内容：

＆＃13;

＆＃13;

$(document).ready(function() {
var stripe = Stripe('pk_test_lf3erqZAzfBDiiNp1wfFkxgv');
var elements = stripe.elements();

var style = {
  base: {
    color: '#303238',
    fontSize: '16px',
    fontFamily: '"Open Sans", sans-serif',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
  },
  invalid: {
    color: '#e5424d',
    ':focus': {
      color: '#303238',
    },
  },
};
var card = elements.create('card', {style: style});
card.mount('#card-element');

});

＆＃13;

<script src="https://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<form action="charge.php" method="post" id="payment-form">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- a Stripe Element will be inserted here. -->
    </div>

    <!-- Used to display form errors -->
    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

＆＃13;

＆＃13;

＆＃13;

  

注意： StackOverflow无法运行但未显示结果，您可以在https://jsfiddle.net/k16mk5z1/

中查看代码的结果

其结果如下：

如何自定义表单的设计，如下所示：

有一份提供references but I can not understand them well的文件。

备注：

从版本3开始，这个新版本通过其javascript插件生成卡片内容

以前在版本2中有一个表单的HTML结构。

Answer 1

您可以对Elements使用单独的字段，例如：http://jsfiddle.net/ywain/whj357u9/

如果您还要收集持卡人的姓名，则需要使用常规<input>字段，并在致电createToken()时在第二个参数中提供其内容：http://jsfiddle.net/ywain/eckhnz19/ < / p>

编辑：如果您希望单独的卡片字段显示卡片品牌图标，则需要自行重新实现该功能。使用change事件相对容易。这是一个例子：http://jsfiddle.net/ywain/L96q8uj5/