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:
javascriptconst 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.