#Rami - React Elements

1 messages · Page 1 of 1 (latest)

reef quarry
#

Hello! Pulling all the context into this thread:

#

I am using Bootstrap for react and when I use CardNumberElement, CardExpiryElement etc. I don't get the inputfields displayed on the UI wondering whether I need to do something differently.

#

Are you seeing any errors or warnings in the console?

fierce bramble
#

Nope...I am not seeing any errors in the console. CardNumber, expiration date and CCV text fields are not editable on the UI. It is so weird. Spent lot of time on it and finally gave up and reaching out to the community.

#

Below is the code : <div className='col-md-6 mb-3'>
<label htmlFor='expiry'>Expiration Date</label>
<CardExpiryElement
id='expiry'
className='form-control'
options={cardStyle}
onChange={cardHandleChange}
/>

#

<form onSubmit={checkoutHandler}>
<div className='form-group row'>
<div className='col-md-12 mb-3'>
<label htmlFor='cardNumber'>Card Number</label>
<CardNumberElement
id='cardNumber'
className='form-control'
options={cardStyle}
onChange={cardHandleChange}
/>
</div>
</div>

                    </form>
#

const checkoutHandler = async () => {
setProcessing(true)
const payload = await stripe.confirmCardPayment(clientSecret, {
payment_method: {
card: elements.getElement(CardNumberElement),
},
})