stripe-payments - Stripe 元素 - 'card-element' 的布局变化

Question

我正在寻找一种在使用 Stripe Elements 并通过 card.mount('#card-element'); 注入(inject)这些字段时自定义“卡号”、“到期日”和“CCV”字段布局的方法。如本页第一个示例中所述 https://stripe.com/docs/stripe-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)