scmitton

[grave pilot]

For reference, here is the style object and the cardElement as it is presently configured: let Payment = (props) => {
let [cardFocus, setCardFocus] = useState(false)

const options = {
    style: {
        base: {
            fontFamily: "Source Sans Pro, sans-serif",
            color: '#242424',
            fontSmoothing: 'antialiased',
            fontSize: '15px',
            '::placeholder': {
                color: cardFocus ? '#6b9bf6' : '#848484',
            },
            iconColor: cardFocus ? '#4784f6' : '#242424'
        },
        invalid: {
            fontFamily: 'Source Sans Pro, sans-serif',
            color: '#f47788',
            iconColor: '#f47788'
        }
    },
    disabled: props.disabled
}

return (
    <div className={`card-container ${cardFocus ? 'focus' : ''}`}>
        <CardElement
            onBlur={() => setCardFocus(false)}
            onFocus={() => setCardFocus(true)}
            onChange={(e) => { e.complete && props.setPayment(true) }}
            options={options}
        />
    </div>
)

}

[brave scroll]

What do you mean by "mute"? Can you share the expected scenario and the current screenshot?

[grave pilot]

This is after submitting the info and the input becomes deactivated. The card number is darker than the other numbers.

[brave scroll]

Do you mean when disabled is set to true, you're expected the card number field to be in the same color as the other fields?

[grave pilot]

yes