Question

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

条纹元素-更改“卡片元素”的布局

1 个答案: