jm-animation-UPE | Stripe Developers | Page 1

neon ibex Aug 5, 2022, 3:21 PM

#

Hello 👋
Just to make sure, the animation where the PaymentElement fades-in correct?

daring kraken Aug 5, 2022, 3:22 PM

#

Correct. The small shrinking effect

neon ibex Aug 5, 2022, 3:36 PM

#

So you can do this to get rid of all transitions:
const elements = stripe.elements({ 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', }, }, }, });

However, that doesn't prevent the animated fade through all the card brands, which I don't think can be turned off.
That also doesn't stop the fade from one method of payment to another.

daring kraken Aug 5, 2022, 3:38 PM

#

Ok let me try it, I just want to load the PaymentElement without any effect, it is ok if there are effects while the user is interacting with, but not on load

daring kraken Aug 5, 2022, 4:19 PM

#

It looks like it is the one used by this css var --p-outerFrameHeightTransitionDuration

stiff badge Aug 5, 2022, 4:19 PM

#

Hi 👋 I'm stepping in for @neon ibex

#

Does that suggestion meet your needs?

daring kraken Aug 5, 2022, 4:20 PM

#

Nope, it didn't

#

Can you help me to get rid of the frame height transition, please?

stiff badge Aug 5, 2022, 4:22 PM

#

I do not know if that is configurable. All the options for our Appearance API can be found here: https://stripe.com/docs/elements/appearance-api

daring kraken Aug 5, 2022, 4:41 PM

#

Is there a way to specify the iframe height in order to not do that animation?

#jm-animation-UPE