#ASittingDuck
tacit fern
zinc flicker
Hello 👋
Hmm not sure if we have a React example for this, let me check
https://stripe.com/docs/js/tokens_sources/create_token?type=cardElement
You might have to use a hook for this
hold on, checking..
mellow salmon
Thank you, I am just not sure what you mean by hook, but I will give you a minute to look.
zinc flicker
Not sure if this works for CardElement exactly but you can try implementing useElements hook described here
https://stripe.com/docs/stripe-js/react#useelements-hook
mellow salmon
hmmm I think I tried that, it works when using confirmPayment I think. I will try it again. I specifically need a token for this instance, otherwise I would be using this example exactly.
zinc flicker
Yeah I think the function expects the element itself and not a ref
mellow salmon
v3:1 Uncaught (in promise) IntegrationError: You must provide a Stripe Element or a valid token type to create a Token.
hmmm, I even tried to use the ref.current
ohhh um, yeah it is null. OK I will see if I can get that not to be null and check back later
zinc flicker
👍
mellow salmon
It appears that the CardElement component does NOT take the ref. This is really not good, because now I have no idea how I am going to pass it
zinc flicker
My understanding is that the useElements hook should work here
can you try printing elements after initializing it?
mellow salmon
I will try and pass it in a minute
zinc flicker
ah try elements.getElement()
That should retrieve the cardElement
mellow salmon
so just elements.getElement() with no arguments?
zinc flicker
yup
mellow salmon
v3:1 Uncaught (in promise) IntegrationError: A valid Element name must be provided. Valid Elements are:
card, cardNumber, cardExpiry, cardCvc, postalCode, paymentRequestButton, iban, idealBank, p24Bank, auBankAccount, fpxBank, affirmMessage, afterpayClearpayMessage; you passed: undefined.
Hold on.... it works if I just pass CardElement
without ref... ok
zinc flicker
Nice, glad that worked
mellow salmon
Thanks for your help!