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

Question

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.

Answer 1

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}) }) }

Answer 2

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})
    })

}