Stripe Payment自定义样式

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/包含示例和源代码供您学习。