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.

Example:

javascript
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>   
            </form>
        </div>
    );
}

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