Stripe Elements - “card-element”布局更改

Question

我正在寻找一种方法来自定义“卡号”、“过期日期”和“CCV”字段的布局，当使用Stripe Elements并通过card.mount('#card-element');注入这些字段时，如此页面的第一个示例所述：https://stripe.com/docs/stripe-js。

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

有什么想法吗？

提前感谢。

- Toseef Zafar

---

您解决了这个问题吗？ - MadMac

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');

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

这是一个有关IT技术的示例。请参考上述链接中的示例3。

- cometfish

---

如何提交单个项目？之前我使用的是卡片对象。 - ujwal dhakal

您只需提交cardNumber元素，Stripe会自动处理其余部分。例如：stripe.createToken(cardNumber).then(function (result) { ... }); 参考文献：https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement “如果适用，Element从同一Elements实例中创建的其他元素中提取数据以进行令牌化 - 您只需要将一个Element作为参数即可。” - cometfish

@cometfish，你的评论帮助我解决了困境。我正在设置计量计费，并且相关文档指导使用createPaymentMethod（而不是createToken）。createPaymentMethod方法参数的文档没有提到其他元素会自动被拉入。一旦你弄清楚了，这似乎很容易，但我却被卡住了两天以上。 - Mifo