The Stripe Card Element is a powerful pre-built UI component that allows you to collect sensitive payment information securely. While it provides a robust and compliant solution out-of-the-box, Stripe also offers extensive customization options to tailor the element's appearance and behavior to match your brand and user experience.
The primary way to customize the Card Element's look and feel is by passing a style object during its initialization. This object accepts properties that mirror CSS, allowing you to control fonts, colors, borders, and more. This provides a high degree of visual control without compromising security, as the sensitive card details are handled by Stripe's secure iframe.
const stripe = require('stripe')('sk_test_YOUR_SECRET_KEY');
async function createPaymentIntent() {
const paymentIntent = await stripe.paymentIntents.create({
amount: 2000,
currency: 'usd',
payment_method_types: ['card'],
});
const elements = stripe.elements();
const cardElement = elements.create('card', {
style: {
base: {
iconColor: '#666666',
color: '#333',
'::placeholder': {
color: '#888',
},
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a',
},
},
});
cardElement.mount('#card-element');
return paymentIntent;
}The style object is structured into two main parts: base and complete. The base style applies to the default state of the element, while complete is applied when the element contains valid information. You can also define styles for empty, invalid, and loading states to provide immediate visual feedback to the user.
Beyond static styling, the Card Element supports dynamic functionality through its event listeners. You can listen for events like change, blur, and focus to react to user interactions and update your UI accordingly. This is crucial for providing real-time validation feedback, enabling/disabling submission buttons, or displaying helpful messages.
cardElement.on('change', function(event) {
const displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});