chukd | Stripe Developers | Page 1

chrome yarrowBOT Mar 3, 2023, 9:27 PM

#

lament hill Mar 3, 2023, 9:27 PM

#

Hi there. What's the issue you're facing?

sly obsidian Mar 3, 2023, 9:37 PM

#

I can't get floating labels to float! Here is a Stackoverflow I posted - https://stackoverflow.com/q/75625511/1186050 and my Stackblitz showing all the working code - https://stackblitz.com/edit/angular-dwmaya?file=src/test/stripe/stripe.component.ts

Stack Overflow

How to style Stripe.js custom element like my other bootstrap float...

I'd like to style my Stripe.js elements (card number, Cvc, Expiry) with floating labels, to be consistent with my other bootstrap floating labels I'm using ngx-stripe as a wrapper around Stripe.js....

StackBlitz

Angular (forked) - StackBlitz

A angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js.

#

maybe you can help? IDK!

lament hill Mar 3, 2023, 9:43 PM

#

So that code looks like it's just the bootstrap forms

#

Do you have a sample with Elements that isn't working as expected?

sly obsidian Mar 3, 2023, 9:45 PM

#

yes, I am using bootstrap forms (w/ floating labels). This Stackblitz showing working code - https://stackblitz.com/edit/angular-dwmaya?file=src/test/stripe/stripe.component.tshttps://stackblitz.com/edit/angular-dwmaya?file=src/test/stripe/stripe.component.ts

StackBlitz

Angular (forked) - StackBlitz

A angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js.

lament hill Mar 3, 2023, 9:46 PM

#

No I need to see the code that isn't working

#

I need to see your Stripe Elements code that you said doesn't work as expected

#

Not bootstrap code

sly obsidian Mar 3, 2023, 9:51 PM

#

I'm not sure I understand your question. The Stackblitz link has non working code in it. I just updated it to show a name field at the top that has floating labels that work and all the Stripe fields below are not working. Did you want something else in terms of code?

flint cliff Mar 3, 2023, 9:52 PM

#

👋 hopping in here - give me a minute to catch up

sly obsidian Mar 3, 2023, 9:57 PM

#

sure, no problem

flint cliff Mar 3, 2023, 10:08 PM

#

Hmm... Let me try some things - I don't actually know if you can do floating labels with the Card Element

sly obsidian Mar 3, 2023, 10:09 PM

#

oh ok, let me know if you can figure something out?

flint cliff Mar 3, 2023, 10:11 PM

#

Have you looked at these samples before? https://github.com/stripe/elements-examples/#example-2

#

It's the second one from here: https://stripe.dev/elements-examples/

sly obsidian Mar 3, 2023, 10:12 PM

#

I saw those but the code and CSS are long and nightmarish.

flint cliff Mar 3, 2023, 10:17 PM

#

As far as I know, that's the only way to do it - what you've tried (with passing in appearance: { labels: 'floating' } ) won't work because it's not supported with the CardElement

sly obsidian Mar 3, 2023, 10:21 PM

#

oh ok.

#

what about Iban?

#

and where did you find that says the CardElement isn't supported?

flint cliff Mar 3, 2023, 10:51 PM

#

It says it's not supported right here: https://stripe.com/docs/elements/appearance-api

#

The Elements Appearance API doesn’t support individual payment method Elements (such as CardElement). Use the Style object to customize your Element instead.

#chukd