条带元素分隔字段

Question

我正在使用 Stripe 元素进行信用卡付款。

我的Javascript是

    const appearance = {
        theme: 'flat'
    };

    stripe = Stripe('xxxx');

    elements = stripe.elements({ appearance });
    card = elements.create('card');
    card.mount('#card-element');

HTML 是

<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<div id="card-errors" role="alert"></div>

显示卡字段时显示为单行

我希望它在更传统的设置中显示为单独的字段，如此处所示https://docs.stripe.com/elements/appearance-api

我该怎么做？

Answer 1

您可能需要使用它们的拆分元素，例如卡号、过期和CVC。然而，他们的 Card Elements 是他们的传统产品，Payment Elements 是更好的选择。该文件。 https://docs.stripe.com/elements/appearance-api您在上面分享的是支付元素。

他们的支付元素提供了一个嵌入式 UI 组件，让您可以通过一次集成安全地接受多种支付方式。根据您的客户所在位置，它动态排序支付方式以优化转化，自动调整不同支付方式的输入字段，验证输入以减少卡支付的摩擦。

我强烈建议您使用他们更现代的支付元素。