Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

Gayatri Barhate 0
Viewed 55
const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        // paymentIntent = payment confirmation

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}

Getting this error: Cannot read properties of undefined (reading 'id') I think due to this error I am not able to process payments using stripe when I click on Buy Now button it shows processing forever and a blank window pops us and goes. I am using Stripe to accept payments.

reactjs javascript
2 Answers

You have to check the null & undefined value for id as well. Same as you did for uid. Changes in code -

.doc(paymentIntent?.id)

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {
        // paymentIntent = payment confirmation

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent?.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}

Anusha Singla0

Do not use object destructuring in the "then" callback and add a null checking for the argument in the callback.

Something like this

const handleSubmit = async (event) => {
    // do all the fancy stripe stuff...
    event.preventDefault();
    setProcessing(true);

    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then((paymentInfo) => {
        // paymentIntent = payment confirmation
        
        if (!paymentInfo) {
          return;
        }
        const { paymentIntent } = paymentInfo;

        db
          .collection('users')
          .doc(user?.uid)
          .collection('orders')
          .doc(paymentIntent.id)
          .set({
              basket: basket,
              amount: paymentIntent.amount,
              created: paymentIntent.created
          })

        setSucceeded(true);
        setError(null)
        setProcessing(false)

        dispatch({
            type: 'EMPTY_BASKET'
        })

        history('/orders',{replace : true})
    })

}
Andrei Belokopytov0
Related