#Hero

1 messages · Page 1 of 1 (latest)

crimson sparrowBOT
viral scarab
#

Hi there, how do you render the PaymentElement in you webpage?

gusty bison
#

using a react component like this:

<div>
    <div style={{width:400, backgroundColor:'white', padding: 20, borderRadius: 10}}>
        <PaymentElement id={'payment-element'} />
        <PayButton onClick={handlePay}>
            {isLoading ? <div className={'spinner'} id={'spinner'}></div> : 'Pay now'}
        </PayButton>
    </div>
</div>
viral scarab
#

OK, and how do you render <Elements> ?

gusty bison
# 
<Elements stripe={stripePromise} options={{clientSecret:payment.secret, appearance}}>
    <CheckoutForm clientSecret={payment.secret}/>
</Elements>
viral scarab
#

OK, and I guess you do a conditionally rendering to show <Elements> only when clientSecret is set right?

gusty bison
#

yes

#

is fetched and stored inside "payment" local state

viral scarab
#

OK. The code looks fine. Does your page include any 3rd-party css or library that could affect animations?

#

Remove any other 3rd-party css and js library and see if the animation is smooth.

gusty bison
#

so what is the correct animation for it to show? starting with height 0 and then just growing vertically until is fully shown?

viral scarab
#

You don't need to set any animation for PaymentElement.

gusty bison
#

i mean the default way

#

how is supposed to look like when it appears?

#

do you have an example i can look at to see how it appears properly

viral scarab
gusty bison
#

okay, looking at the CSS on that page it seems like the container has a min-height of 500px

#

and the stripe element is centered

#

so it doesnt make the container grow or shrink

viral scarab
#

You can see the container grow or shrink by clicking Klarna and then Card

gusty bison
#

yea when it grows over 500px

#

but still has that limit so it doesnt shrink to 0 at the start

#

seems like adding that min height prevents the popping now

#

thanks for the help

#

one last question, is there any variable in the element that shows when all the inputs are valid, so we can enable the "Pay now" button

viral scarab
gusty bison
#

and this 'paymentElement', do I get it using useRef?

viral scarab
#

You can pass the onChangeListener through its options