#dsmcr
fallow fog
long fiber
I see. Do you apply any other styling to these components?
wintry grotto
I do, but I've removed all but the labels: "floating" one to isolate the issue.
long fiber
If you remove that, does it look OK?
wintry grotto
Yes. The "above" style input labels works fine
long fiber
What element are you using?
wintry grotto
elements.create("payment")
long fiber
Still trying to reproduce on my side, give me a second
wintry grotto
The CSS variable is showing as "NaNpx" for the input (shown on the tooltip)
Fair few of the CSS variables seem to be coming back as NotANumber in Chrome when using floating labels.
long fiber
I see. It might be an issue on our side. Let me check with the team.
Are you setting any CSS variables in your app that might interfere?
wintry grotto
No. If you're getting NaN, then the issue is likely it a Javascript calculation somewhere in the code.
long fiber
True. Let me check and I will get back to you.
wintry grotto
No probs. Thanks for the assistance.
long fiber
Is the page hosted somewhere where we could reproduce the issue?
wintry grotto
Oh wait.... easier option: https://library.dsm.pw/?path=/story/payment-stripe--primary
deft condor
are you using Vue? we don't really support that at all.
Also maybe try removing whatever this Sparklines CSS is, maybe that is interfering
wintry grotto
Yes, it's Vue, but the Vue code is literally just <div ref="mountRef"></div> and then when the component mounts, it targets that div paymentElement.mount(mountRef) so operationally, it's no different from vanilla JS.
deft condor
I don't know anything about Vue but I do know we have lots of compatibility problems with it, because we are not compatible with Shadow DOMs
I imagine that might be the issue here, to calculate those offsets we need to get information on the DOM we're mounted into and maybe that is not working here due to Shadow DOMs. Totally a guess though
wintry grotto
Vue doesn't render inside a Shadow DOM. It just mounts to a given <div> element on the mount.
The Storybook link is a bit more complex structurally (iframes and such), but the website it's being implemented on is just standard HTML
deft condor
does it work if you use this third party library instead? https://docs.vuestripe.com/vue-stripe/#stripe-elements
ultimately my guess is this is Vue-related(I really think it's that), or there's some CSS on your page that somewhow interferes. If it still doesn't work when using that third party then I'd suggest writing to https://support.stripe.com/?contact=true with that storybook repro link so we can dig in with the product team
wintry grotto
That library is only Vue2, but it's functionally using the exact same mounting process as I'm using.
CSS wouldn't be able to cause a NaN error on the CSS variable calculations though. Worst case scenario, it'd just cause them to return a 0 if an element wasn't rendering properly that's being measured for height. But yeah, I'll give that a go. Thanks.
deft condor
yeah I mean to be clear, there is JS code in our library that computes those CSS values like labelRestingTransform based on, I think, the size of the input. Obviously that code is returning NaN in your case for some reason(which IMO is likely to be Vue-related)