如何挂载单个卡片元素 stripe.js?

Posted

技术标签:

【中文标题】如何挂载单个卡片元素 stripe.js?【英文标题】:How to mount individual card elements stripe.js? 【发布时间】:2017-08-12 17:07:37 【问题描述】:

我正在尝试安装单个卡片元素以获得所需的设计,但是当我安装多个元素时,只安装了最后一个。

我的程序如下:

var stripe = Stripe(STRIPE_PUBLISHABLE_KEY);
var elements = stripe.elements();

var cardNumber = elements.create('cardNumber');
var cardExpiry = elements.create('cardExpiry');
var cardCvc = elements.create('cardCvc');

// Add an instance of the card Element into the `card-element` <div>
cardNumber.mount('#card-element');
cardExpiry.mount('#card-element');
cardCvc.mount('#card-element');

【问题讨论】:

【参考方案1】:

每个元素需要使用不同的容器,否则挂载时会覆盖前一个。

在您的情况下,您需要 3 个容器(例如 #card-number-element、#card-expiry-element 和 #card-cvc-element),然后将最后 3 行更改为例如:

cardNumber.mount('#card-number-element');
cardExpiry.mount('#card-expiry-element');
cardCvc.mount('#card-cvc-element');

【讨论】:

以上是关于如何挂载单个卡片元素 stripe.js?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap 卡片元素之间添加空格?

如何在 Angular 组件的输入元素上正确设置 ID?

具有两列和三个卡片 ui 元素的相同高度

如何使选择列表出现在另一个元素上?

如何循环遍历一个 Div 元素块 N 次?

使用单独的元素创建条带标记