Search code examples
stripe-paymentspayment

Stripe Payment custom style

For my online shop I would like to offer credit card as payment method. I have chosen the payment provider "Stripe". I have already successfully processed payments via the SDK that offers Stripe. But I don't like the default settings. I would like to have the classic view with credit card number, expiration date and CVC instead of to modern one liner. How can I adapt the design to this?

Right now it looks like this: Image

but it should finally look like: Image

code example:

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');
Solution

  • You can separate all the Elements out and style them as you please. https://stripe.dev/elements-examples/de/ has examples and source code for you to learn from.