条纹元素 - 'card-element' 布局的变化

Question

我正在寻找一种方法来自定义“卡号”“到期日期”和“CCV”字段的布局，当使用条纹元素并card.mount('#card-element');按照本页第一个示例中所述注入这些字段https://stripe.com/文档/条纹-js

它将所有卡片字段放在一行中，我想更改该布局并将它们放在不同的行中。

有任何想法吗？

提前致谢

Answer 1

您可以通过为每个卡片输入（编号、到期时间、CVC）创建一个单独的 div 来实现这一点，您可以根据自己的喜好进行布局：

<div id="example3-card-number"></div>
<div id="example3-card-expiry"></div>
<div id="example3-card-cvc"></div>

然后告诉 Stripe Elements 关于每一个：

var cardNumber = elements.create('cardNumber');
cardNumber.mount('#example3-card-number');

var cardExpiry = elements.create('cardExpiry');
cardExpiry.mount('#example3-card-expiry');

var cardCvc = elements.create('cardCvc');
cardCvc.mount('#example3-card-cvc');

参考：https : //stripe.dev/elements-examples/（示例 3）