#arkansasbeauty_code
marsh prismBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1291129317157503159
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
granite fern
Hello
Hmmm I don't recall if the ready Event only fires for Payment Element... let me check
bold aurora
ok
granite fern
Nope nvm works fine for me
Ah looking at your code I assume your CardNumber Element hasn't rendered yet when you are trying to retrieve it in your useEffect
I'd log that out there and see
bold aurora
its logging CardNumberElement not found
granite fern
Oh yeah well that is why you don't have the ready event fire then
bold aurora
import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement } from "@stripe/react-stripe-js";
const stripe = useStripe();
const elements = useElements();
useEffect(() => {
if (!stripe || !elements) {
console.log("cc- Stripe or elements not initialized");
return;
}
// Use elements.getElement to access the elements directly
const cardNumber = elements.getElement(CardNumberElement);
if (!cardNumber) {
console.log("cc- CardNumberElement not found");
return;
}
cardNumber.on('ready', () => {
console.log("cc- CardNumberElement is ready.");
setElementsLoading(false); // When the element is ready, set loading to false
});
return () => {
// Clean up listeners when component unmounts
cardNumber.off('ready');
};
}, [stripe, elements]);