Unhandled Rejection (FirebaseError): Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in document users/tDJ1zI9JWwakZdq5CkFh/orders/pi_1ILaCRDbKBqU3OnKnhbGH0Dv)

[haroon437]

The error in the Payment.js section where we using no sql db.collection('users') if anyone solve this erorr pls help me

import React, { useState, useEffect } from 'react'
import "./Payment.css";
import { useStateValue } from "./StateProvider";
import CheckoutProduct from "./CheckoutProduct"
import { Link, useHistory } from "react-router-dom"
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import CurrencyFormat from 'react-currency-format';
import { getBasketTotal } from "./reducer";
import axios from './axios';
import { db } from "./firebase";

function Payment() {
const [{ basket, user, }, dispatch] = useStateValue();
const history = useHistory();

const stripe = useStripe();
const elements = useElements();

const [succeeded, setSucceeded] = useState(false);
const [processing, setProcessing] = useState("");
const [error, setError] = useState(null);
const [disabled, setDisabled] = useState(true);
const [clientSecret, setClientSecret] = useState(true);

useEffect(() => {
    //generate a special stripe code to allow us to charge customer
    const getClientSecret = async () => {
        const response = await axios({
            method: 'post',
            url: `/payments/create?total=${getBasketTotal(basket) * 100}`
        });
        setClientSecret(response.data.clientSecret)
    }

    getClientSecret();

}, [basket])

console.log('The Secret is', clientSecret)
console.log('hello', user)

const handleSubmit = async (event) => {
    event.preventDefault();
    setProcessing(true);

    // eslint-disable-next-line no-unused-vars
    const payload = await stripe.confirmCardPayment(clientSecret, {
        payment_method: {
            card: elements.getElement(CardElement)
        }
    }).then(({ paymentIntent }) => {

        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.replace('/orders')
    })
}

const handleChange = event => {
    //Listen for the changes in the card element
    //and display any errors as the customer type their card details
    setDisabled(event.empty);
    setError(event.error ? event.error.message : "");

}

return (
    <div className="payment">
        <div className="payment_container">
            <h1>
                Checkout (<Link to='/checkout'>{basket?.length} items</Link>)
            </h1>
            {/* delivery address */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Delivery Address</h3>
                </div>
                <div className="payment_address">
                    <p>{user?.email}</p>
                    <p>Street 4</p>
                    <p>Islambad</p>
                </div>

            </div>

            {/* Review Items */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Review Items and Delivery</h3>
                </div>
                <div className="payment_items">
                    {basket.map(item => (
                        < CheckoutProduct
                            id={item.id}
                            title={item.title}
                            image={item.image}
                            price={item.price}
                            rating={item.rating}
                        />
                    ))}
                </div>
            </div>

            {/* Payment Method */}
            <div className="payment_section">
                <div className="payment_title">
                    <h3>Payment Method</h3>
                </div>
                <div className="payment_details">

                    <form onSubmit={handleSubmit}>
                        <CardElement onChange={handleChange} />
                        <div className="payment_priceContainer">
                            <CurrencyFormat
                                renderText={(value) => (
                                    <h3>Order Total: {value}</h3>

                                )}
                                decimalScale={2}
                                value={getBasketTotal(basket)}
                                displayType={"text"}
                                thousandSeparator={true}
                                perfix={"$"}
                            />
                            <button disabled={processing || disabled || succeeded}>
                                <span> {processing ? <p>Processing</p> : "Buy Now"}</span>
                            </button>
                        </div>
                        {error && <div>{error}</div>}
                    </form>
                </div>

            </div>

        </div>

    </div>
)

}

export default Payment

[Eliot6001]

So the bug of "Function DocumentReference.set()" basically means there's some sort of data inside the set() function that is undefined, i suggest you take a look at the data you're passing, in this case

basket: basket,
amount: paymentIntent.amount,
created: paymentIntent.created

each part of the data related to basket (and every child of it meaning the items that you pass to the basket in the context api/redux) and each of the items children/props, and basically i think paymentIntent values should be fine

[bhavy007]

So the bug of "Function DocumentReference.set()" basically means there's some sort of data inside the set() function that is undefined, i suggest you take a look at the data you're passing, in this case

basket: basket,
amount: paymentIntent.amount,
created: paymentIntent.created

each part of the data related to basket (and every child of it meaning the items that you pass to the basket in the context api/redux) and each of the items children/props, and basically i think paymentIntent values should be fine

THANK YOU SO MUCH.
For everyone stuck with this error, remove these lines of code one by one and proceed with your payment.

basket: basket,
amount: paymentIntent.amount,
created: paymentIntent.created

Yes there is an error in of these lines. In my case it was the basket. I forgot to put an id in the basket long way back. ( I got to know this by logging basket at various stages in the app). So I had to go back to home.js and put the id. This was an absolute stupid error from my side, you might have done something similar.