条纹支付自定义样式

Question

对于我的网上商店，我想提供信用卡作为付款方式。我选择了支付提供商 "Stripe"。我已经通过提供 Stripe 的 SDK 成功处理了付款。但我不喜欢默认设置。我想要具有信用卡号、到期日期和 CVC 的经典视图，而不是现代的单行。我怎样才能使设计适应这种情况？

现在看起来像这样： Image

但它最终应该是这样的： Image

代码示例：

var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
    base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

// Create an instance of the card Element.
var card = elements.create('card', { style: style });

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

Answer 1

您可以将所有元素分离出来并根据需要设置样式。 https://stripe.dev/elements-examples/de/ 有示例和源代码供您学习。

条纹支付自定义样式

Stripe Payment custom style

payment

stripe-payments