React useEffect with Stripe - get client secret asynchronously

Question

I've been plopped into the middle of a react project with no prior knowledge so I'm sure this a duplicate.

I want to use the StripeElements, and the react library is easy enough. I'm just not sure how to get the client secret from the server.

This is what I'm trying:

const stripePromise = loadStripe('stripe_key');

const StripeForm = () => {

    const [stripeData, setStripeData] = useState({});

    const getClientSecret = async () => {
        const { data } = await api.get(`payment/stripe/get-client-secret/`);
        return data
    }

    useEffect(() => {
        getClientSecret().then(data => setStripeData(data))
    }, [])

    if(stripeData.clientSecret) {
        return (
            <QuoteContainer title={"Pay With Credit Card"}>
                <SectionCard>
                    {stripeData.clientSecret}
                </SectionCard>
            </QuoteContainer>
        );
    }

    return (<b>Loading</b>)
}

The route payment/stripe/get-client-secret/ returns an array with a key 'clientSecret'. This function is working correctly.

I just can't get the <b>Loading</b> text to be replaced with the QuoteContainer component once the promise is resolved.

also add ```.catch(handleError)``` just to make sure everything works as intended (you can log error there if you want). — Alexander B., Mar 07 '22 at 05:24
also have a look at this answer (https://stackoverflow.com/a/53572588/3500157) how you can write useEffect with async stuff in it (better to choose either then's or async/await style). — Alexander B., Mar 07 '22 at 05:29
Was a wrong key name, thanks guys. Was getting client_secret not clientSecret. — Josh Dredge, Mar 07 '22 at 05:32

score 1 · Answer 1 · answered Mar 07 '22 at 05:16

1

If you want to rendering Loading component. You have to set falsy value for stripedData state. Because {} value is truthy. So I think the code is not rendering Loading component. The loading component is not rendered because there is no place to set it as a false value anywhere.

answered Mar 07 '22 at 05:16

Codiving

126
4

```stripeData.clientSecret``` is undefined , so it will be false in this case... – Alexander B. Mar 07 '22 at 05:18

score 0 · Answer 2 · answered Mar 07 '22 at 06:47

0

what AJAX library are you using to make the API call? Usually you need to call a function on the response object in order to access the data. For instance, if you are using fetch(), you need to call json() then access the response data.

answered Mar 07 '22 at 06:47

qichuan

476
3
7

React useEffect with Stripe - get client secret asynchronously

2 Answers2