Change style of a React Stripe Element component

If you want to change the style of an element using @stripe/react-stripe-js, you can do it by setting the style prop.


const CheckoutForm = () => {
    const [payment, setPayment] = useState(false);
    const stripe                = useStripe();
    const elements              = useElements();
    let style = {
        base: {
            color: 'white',
            fontFamily: 'Avenir',
            fontSize: '12px'
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
    return (
        <div className = 'Checkout'>
            <form className = 'Modal-Wrap'>
                <CardElement options = {{hidePostalCode: true, style: style}}/>
                    <button type = 'submit' disabled = {!stripe}>Pay</button>   

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.