[BUG]: PaymentElement CVC missing placeholder
Closed this issue · 5 comments
What happened?
The placeholder for the CVC input in the PaymentElement has disappeared
It can be seen even within the stripe docs.
the html contains an empty placeholder value
as of a couple days ago, the placeholder was displaying correctly
Environment
No response
Reproduction
https://docs.stripe.com/elements/appearance-api?platform=web
Hey there, thanks for raising this. This is expected behaviour after some optimization fine tuning work.
If you have concerns about this, please do share that via our support channels so that it can be attributed to your Stripe account: https://support.stripe.com/contact
Hey there, thanks for raising this. This is expected behaviour after some optimization fine tuning work.
If you have concerns about this, please do share that via our support channels so that it can be attributed to your Stripe account: https://support.stripe.com/contact
hm i'm struggling to understand how removing the placeholder would be an optimization, could u elaborate? Especially without having the ability to customize the placeholders, this seems a bit aggressive to just roll out to (all?) versions
in particular, i have an integration where we hide the input labels (saves ~100px of height) - so not having a placeholder here is a considerably worse UX imo
But just in general, for the homogeneity of PaymentElement, i think removing the CVC placeholder is a downgrade...
Why is the placeholder in your hosted checkout not removed as well?
Can you share exactly how you're hiding the field labels in your implementation? I'm sharing your feedback with the Elements team, but want to make sure I've captured it accurately.
While I do that, an alternative you can evaluate is using labels: 'floating' for the label text to become the "placeholder" before the field is focused/filled: https://docs.stripe.com/elements/appearance-api?platform=web#others
just by setting a rule on the Label via appearance
".Label": {
fontSize: "0px",
margin: "0px",
},
The floating labels is not really an acceptable alternative, as that would increase the height of the payment element significantly
@mPaella thanks for that detail -- we're looking at some options here but in the interim, this has been revised to include "CVC" placeholder for the new "Security Code" field label.
