#bonnerearle_code
forest wagonBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1221833702607163513
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
hasty dirgeBOT
eager beacon
Hello
fallen pike
Hello
eager beacon
What you are doing should work fine.
You look to be correctly following using classes and style (https://docs.stripe.com/js/elements_object/create_element?type=cardNumber#elements_create-options-classes)
You aren't seeing these styles take effect?
fallen pike
it isn't picking up the font-family or the line-height
I've also noticed the height of the iframe that contains the input field is set explicitly so I'm not sure even if the styles were applied if the control would then be letterboxed by the height on the iframe
(I added three images from dev tools there)
eager beacon
K one sec let me repro
eager beacon
Okay @fallen pike it looks like you are missing the class variants that you want these styles applied to. So it should be more like let options = { classes: { base: "form-control", invalid: "invalid" }, style: { base: { fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif", lineHeight: "24px" } } }; if you wanted these styles applied during the base variant.
You can actually see an example of this as well at https://docs.stripe.com/js/appendix/style