#DesertRodent-ReactNative Elements
atomic mountain
Check out the sample import statements at https://stripe.com/docs/stripe-js/react#elements-provider
First thing I see is you're importing {useStripe} while our examples import {Elements}
random violet
Thanks...What i am trying to do is process an existing card and don't need to worry about taking card forms etc..
so i have a card reference and trying to use a stored card to process the transaction and then handle the 3ds aftewards
atomic mountain
Ah OK, you don't need Elements at all then. What are you calling when you "try to use" and get an error?
random violet
for this specific component i need to just handle the server response to display 3DS
so i need to configure the stripe component for our connected account data..then just handle the response to popup the 3DS
e.g.
const { error, paymentIntent } = await handleCardAction( response.Data.ThreeDSData )
the rest is handled in the server backend
atomic mountain
Is that line where you get the error?
random violet
i get the error above before i even get to run any code..which is why i think my stripe init code is wrong
i was trying to use
const { handleCardAction } = useStripe()
then it complains about missing <Elements thing
if i have to wrap my whole project in an <Elements> tag then so be it, but was trying to isolate the single order button component if possible..
atomic mountain
Since there aren't any DOM elements involved, should be as simple as:
import {useStripe} from '@stripe/react-stripe-js';
const stripe = useStripe(); // you may want to wrap this in a component
and then you've got stripe to call to handle that card action
e.g. await stripe.handleCardAction( ... )
random violet
do i still need to do this?
useEffect(() => { const fetchStripeObject = async () => { if (paymentGatewayConfig) { const res = await loadStripe( process.env.REACT_APP_STRIPE_LIVE_MODE ? paymentGatewayConfig.LivePublicKey : paymentGatewayConfig.TestPublicKey, { stripeAccount: paymentGatewayConfig.ConnectedAccountReference } ) setStripeObject(res) } } fetchStripeObject() }, [paymentGatewayConfig])
which is the loading of stripe?
with my config
because as soon as i add in the useStripe i get the same error
Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe()
atomic mountain
useEffect seems unnecessary for what you're doing. When you use the example I provided above in a barebones way, does the error still happen?
atomic mountain
OK, I'd start with the examples under Using hooks on https://github.com/stripe/react-stripe-js#using-hooks which is more than you need, but you should be able to run that and then prune back to just what you need.
(it's a full checkout form but if you can get that running error free, you have the correct imports)
random violet
thx