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

【问题标题】：Stripe Elements - change in layout of 'card-element'条纹元素 - 'card-element' 布局的变化
【发布时间】：2019-07-23 18:02:25
【问题描述】：

我正在寻找一种方法来自定义“卡号”“到期日期”和“CCV”字段的布局，当使用条纹元素并通过card.mount('#card-element'); 注入这些字段时，如本页第一个示例中所述@987654321 @

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

有什么想法吗？

提前致谢

【问题讨论】：

您找到解决方案了吗？

标签： stripe-payments

【解决方案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）

【讨论】：

那么如何提交单件呢？以前我使用的是卡片对象
您只需提交 cardNumber 元素，其余的由 Stripe 解决。例如：stripe.createToken(cardNumber).then(function (result) { ... }); Ref：stripe.com/docs/js/tokens_sources/create_token?type=cardElement “如果适用，该元素会从您在同一元素实例上创建的其他元素中提取数据以进行标记——您只需提供一个元素作为参数。”
@cometfish 你的评论帮助我摆脱了困境。我正在设置计量计费，并且相关文档沿着使用 createPaymentMethod（相对于 createToken）的路径进行。 createPaymentMethod 方法参数的文档没有提到其他元素会自动拉入。一旦你弄清楚它似乎很容易，但我被困了两天多。