Uncaught TypeError: Cannot read properties of undefined (reading ‘value’)

I have been trying to integrate PayPal in my e-commerce project. It works fine in Paypal button but I have problems in making the transaction complete.

After clicking “Pay Now” in the sandbox, the money goes through but the transaction in my database was not completed.

Here’s my checkout.html file:

{% extends 'store/main.html' %}
{% load static %}
{% block content %}
     <div class="row">
        <div class="col-lg-6">
            <div class="box-element" id="form-wrapper">
                <form id="form">
                    <div id="user-info">
                        <div class="form-field">
                            <input required class="form-control" type="text" name="name" placeholder="Name..">
                        </div>
                        <div class="form-field">
                            <input required class="form-control" type="email" name="email" placeholder="Email..">
                        </div>
                    </div>
                    
                    <div id="shipping-info">
                        <hr>
                        <p>Shipping Information:</p>
                        <hr>
                        <div class="form-field">
                            <input class="form-control" type="text" name="address" placeholder="Address..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="city" placeholder="City..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="state" placeholder="State..">
                        </div>
                        <div class="form-field">
                            <input class="form-control" type="text" name="zip" placeholder="zip code..">
                        </div>
                    </div>

                    <hr>
                    <input id="form-button" class="btn btn-success btn-block" type="submit" value="Continue">
                </form>
            </div>

            <br>
            <div class="box-element hidden" id="payment-info">
                <small>Paypal Options</small>

                <div id="paypal-button-container"></div>
            </div>
            
        </div>

        <div class="col-lg-6">
            <div class="box-element">
                <a  class="btn btn-outline-dark" href="{% url 'cart' %}">&#x2190; Back to Cart</a>
                <hr>
                <h3>Order Summary</h3>
                <hr>
                {% for item in items %}
                    <div class="cart-row">
                        <div style="flex:2"><img class="row-image" src="{{item.product.imageURL}}"></div>
                        <div style="flex:2"><p>{{item.product.name}}</p></div>
                        <div style="flex:1"><p>₱{{item.product.price|floatformat:2}}</p></div>
                        <div style="flex:1"><p>x{{item.quantity}}</p></div>
                    </div>
                {% endfor %}
                <h5>Items:   {{order.get_cart_items}}</h5>
                <h5>Total:   ₱{{order.get_cart_total|floatformat:2}}</h5>
            </div>
        </div>
    </div>


<script src="https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD"></script>

<script>
    var total = '{{order.get_cart_total}}'
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        style:{
            //color: 'blue',
            shape: 'rect',
        },

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: parseFloat(total).toFixed(2)
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(orderData) {
                submitFormData()
            });
        }


    }).render('#paypal-button-container');
</script>

<script type="text/javascript">
    var shipping = '{{order.shipping}}'
    var user = '{{request.user.is_authenticated}}'
    

    if(shipping == 'False'){
        document.getElementById('shipping-info').innerHTML = ''
    }

    if (user != "False"){
        document.getElementById('user-info').innerHTML = ''
    }

    if (shipping == 'False' && user != "False"){
        //Hide entire form if user is logged in and shipping is false
        document.getElementById('form-wrapper').classList.add('hidden');
        //Show payment if logged in user wants to buy an item that does not require shipping
        document.getElementById('payment-info').classList.remove('hidden');
    }

    var form = document.getElementById('form')
    
    form.addEventListener('submit', function(e){
        e.preventDefault()
        console.log('Form Submitted...')
        document.getElementById('form-button').classList.add("hidden");
        document.getElementById('payment-info').classList.remove("hidden");
    })

    /*document.getElementById('make-payment').addEventListener('click', function(e){
        submitFormData()
    })
    */

    function submitFormData(){
        console.log('Payment button clicked')

        var userFormData = {
            'name':null,
            'email':null,
            'total':total,
        }

        var shippingInfo = {
            'address':null,
            'city':null,
            'state':null,
            'zip':null,
        }

        if (shipping != 'False'){
            shippingInfo.address = form.address.value
            shippingInfo.city = form.city.value
            shippingInfo.state = form.state.value
            shippingInfo.zip = form.zip.value
        }

        if (user != 'True'){
            userFormData.name = form.name.value
            userFormData.email = form.email.value
        }

        var url = '/process_order/'
        fetch(url,{
            method:'POST',
            headers:{
                'Content-Type':'application/json',
                'X-CSRFToken':csrftoken,
            },
            body:JSON.stringify({'form':userFormData, 'shipping':shippingInfo})
        })

        .then((response) => response.json())
        .then((data) => {
            console.log('Success:', data);
            alert('Transaction Completed');

            cart ={}
            document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"

            window.location.href = "{% url 'store' %}"
        })
         
    }

</script>

{% endblock content %}

The error was in my console. This is the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'value')
    at submitFormData (http://127.0.0.1:8000/checkout/:207:36)
    at http://127.0.0.1:8000/checkout/:140:5
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15659)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:16040)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15526
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:15659)
    at e.n.resolve (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:14716)
    at e.n.dispatch (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:16040)

Error: Cannot read properties of undefined (reading 'value')
    at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:71786)
    at Object.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80160)
    at JSON.parse (<anonymous>)
    at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80019)
    at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80172)
    at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84738)
    at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84858)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:91179
    at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:18264)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:90976

Error: Cannot read properties of undefined (reading 'value')
    at Pr.error (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:71786)
    at Array.<anonymous> (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80160)
    at JSON.parse (<anonymous>)
    at Ir.o (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80019)
    at Ir (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:80172)
    at Yr.u.on (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84738)
    at Yr (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:84858)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:91179
    at Function.e.try (https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:18264)
    at https://www.paypal.com/sdk/js?client-id=AVESrMsFLVbGdGrS_eWIIpWsK0Yu-W0_3kWU64V7t6LhL8mlMtduwiMZ4bt4yusZLInbf_Q7_64b0oAi&currency=USD:2:90976

It was saying that there’s an error in my submitFormData() or JavaScript. But I cannot find what is the problem.