derjanni-paymentelement-appearance | Stripe Developers | Page 1

jade bronze Oct 25, 2021, 5:12 PM

#

hello, looking into a separate Appearance question, will look at yours too

coral cypress Oct 25, 2021, 5:15 PM

#

thanks.

#

any Chr432 an change. to

#

any chan4e32

#

any chance to get ird of t1

#

any chance to get rid of this discord thing?

jade bronze Oct 25, 2021, 5:16 PM

#

what discord thing?

coral cypress Oct 25, 2021, 5:16 PM

#

what happend to the guys on libera?

jade bronze Oct 25, 2021, 5:17 PM

#

a few of us hang out on Libera gut most users prefer meeting us here

so I understand your context here

any chance to get rid of this discord thing?

why do you say that?

coral cypress Oct 25, 2021, 5:17 PM

#

it^ 22ß97

#

It d132

#

it

#

This discord is going mental on my machine.

#

sry

#

I am v13412

#

I am very sorry.

#

I'm struggling with the Elements Appearance API to change the color of the outline of selected Input-fields. Any idea on how to get rid of the blue?

jade bronze Oct 25, 2021, 5:26 PM

#

sure give me a sec

teal oasis Oct 25, 2021, 5:35 PM

#

👋 I'm just hopping in to help! @coral cypress give me a moment to check the appearance api

coral cypress Oct 25, 2021, 5:35 PM

#

Okay, thank you.

#

@open stone just helped me getting the discord $§"% fixed

#

https://pastebin.com/RuaMnBLJ

#

https://pastebin.com/RuaMnBLJ

teal oasis Oct 25, 2021, 5:45 PM

#

Please keep all your messages in this thread, and don't cross post them to the man #dev-help channel

coral cypress Oct 25, 2021, 5:45 PM

#

sorry, I am seriously too old for this discord.

#

Where do I see the threads?

teal oasis Oct 25, 2021, 5:48 PM

#

This is your thread - just to keep it simple you can put all your messages here. @gloomy mortar tagging in case you want to follow along

coral cypress Oct 25, 2021, 6:00 PM

#

understood

teal oasis Oct 25, 2021, 6:06 PM

#

Sorry it's taking a while - it's not behaving like I thought it would

coral cypress Oct 25, 2021, 6:06 PM

#

Sorry

#

"it's" being discord?

teal oasis Oct 25, 2021, 6:07 PM

#

"It" being the appearance API to try and remove that blue outline on the focused input fields

coral cypress Oct 25, 2021, 6:07 PM

#

ah ok

#

The whole thing shows really weird behaviour and I don't know why it has animations, it's seriously draining batteries on mobile.

#

Haven't found any info on where to turn it all off. As you can see from my source, I already disabled all themes.

#

My org is 100% PCI DSS compliant and audited, but I don't really want to go down the path and implement each payment method myself.

teal oasis Oct 25, 2021, 6:18 PM

#

Phew! Finally got it to work - I was editing the wrong variables 😦

#

Okay, so is your goal to remove that blue border entirely?

#

If you want to remove the outline entirely, you can set outline: 'none', for .Input:focus and that should remove the blue outline entirely

coral cypress Oct 25, 2021, 7:11 PM

#

thank you, it is working now.

weak flume Oct 25, 2021, 7:14 PM

#

Glad to hear!

coral cypress Oct 25, 2021, 7:17 PM

#

sorry to bother you again, but do you know how to disable the animations?

#

https://stripe.com/docs/stripe-js/appearance-api <-- the docs onfortunately do not have any information on that.

weak flume Oct 25, 2021, 7:19 PM

#

No bother at all. Always happy to help.

#

I do not know that one immediately. Looking in to it and will get back to you

#

I am still looking in to how these animations work. Have you tried setting the transition property with a rule? (all the way at the bottom of https://stripe.com/docs/stripe-js/appearance-api#supported-css-properties)

Elements Appearance API | Stripe Documentation

Customize the look and feel of Elements to match the design of your site.

coral cypress Oct 25, 2021, 7:30 PM

#

of which element?

#

it's the p-PaymentDetails element and the docs say that I am not supposed to touch it.

weak flume Oct 25, 2021, 7:33 PM

#

Apologies I mixed up some of our elements lingo

#

I don't recognize "p-PaymentDetails " can you link to our doc or example where you are seeing that?

coral cypress Oct 25, 2021, 7:37 PM

#

weak flume I don't recognize "p-PaymentDetails " can you link to our doc or example where y...

It's the element with the animation, but the docs say I am not supposed to touch the p-* elements, however I cannot disable the weird animations.

#

This is not meant to be offensive, but these crazy animations look really "childish" (quote from a customer of ours) and I cannot have them in my production software.

#

I really don't want to implement the entire UI for all fop myself

weak flume Oct 25, 2021, 7:38 PM

#

Thanks for the clarification. Looking in to what we can do here.

#

Want to make sure I am communicating properly with my colleagues on this: how did you determine that it is the p-PaymentDetails class specifically that needs its animations disabled here?

coral cypress Oct 25, 2021, 8:03 PM

#

I debugged the client-side javascript in the iframe and Firefox said that that is the element causing the CPU-drain

#

it also contains a class called "is-animatable", but there's no info on how to disable it.

#

Both SpiderMonkey and V8 are really struggling to keep the framerate up with the animation. It is unnecessary for my usecase and my customers don't like it. They want it to go.

weak flume Oct 25, 2021, 8:05 PM

#

        clientSecret,
        appearance: {
          theme: 'none',
          rules: {
            '.Action, .Block, .BlockAction, .Button, .CheckboxInput, .CheckboxLabel, .CodeInput, .Error, .Icon, .Input, .Label, .MenuAction, .MenuIcon, .PickerAction, .PickerItem, .RedirectText, .SecondaryLink, .Switch, .SwitchControl, .Tab, .TabIcon, .TabLabel, .TermsLink, .TermsText, .Text': {
              transition: 'none',
            },
          },
        },
      });```

#

That will disable many but not all animations. I will raise feedback internally about being able to disable all of them

#

Are there specific animations you are looking to disable?

coral cypress Oct 25, 2021, 8:08 PM

#

tried it, did not disable a single animation. Sorry.

#

Also the card number field has an animation of the card logos.

#

That animation specifically serves no purpose.

#

I have a deadline in 2 weeks. Do you think this is doable or shall I implement the entire UI myself?

jade bronze Oct 25, 2021, 8:28 PM

#

@coral cypress hello, your msg is here right

coral cypress Oct 25, 2021, 8:37 PM

#

No the one about PayPal.

#

sorry, discord is driving me insane.

#derjanni-paymentelement-appearance