Paypal button double payment problem

paypal-button.js

window.paypal.Buttons({
        style: {
            shape: "rect",
            layout: "vertical",
            color: "gold",
            label: "paypal",
        },
        message: {
            // amount: 100,
        } ,

        async createOrder() {

            document.getElementById("paypal-loading").style.display = 'block';

            purchase_spinner.forEach(e => {
                e.style.display = 'visible'
            });

            const res = await fetch(`${PAYPAL_CREATE_ORDER_URL}`, {
                method: "POST",
                headers: {
                    "X-CSRFToken": Cookies.get('csrftoken'),
                    // 'Content-Type': 'application/json'
                    }, 
                body: JSON.stringify({
                    plan: planId,
                    canva_ass_id: canva_acc_id.value,
                })
            });

            resetButtons()
            document.getElementById("paypal-loading").style.display = 'none ';

            try {
                if (res.headers.get('content-type') === 'application/json') {
                    data = await res.json();
                    // console.log("data: ", data)
                    responseBody = JSON.stringify(data); // Store the JSON response body
                } else {
                    data = await res.text();
                    responseBody = data; // Store the text response body
                }
            } catch (e) {
                console.log("response: ", res);
                toastAlert(null, "unknown error occurred. Contact support", "danger")
                return
            }
            
        
            if (res.status !== 200){
                purchase_buttons.forEach(e => e.disabled = false)
                toastAlert(null, "unknown error occurred. Contact support", "danger")
                return
            }


            return data.order_id

        } ,

        async onApprove(data, actions) {
            // console.log("data: ", data, actions)

            const {orderID} = data

            console.log("order id: ", orderID, data)

            const res = await fetch(PAYPAL_CAPTURE_ORDER_URL(orderID), {
                method: "POST",
                headers: {
                    "X-CSRFToken": Cookies.get('csrftoken'),
                    'Content-Type': 'application/json'
                    }, 
            });

            const orderData = await res.json();

            // Three cases to handle:
            //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
            //   (2) Other non-recoverable errors -> Show a failure message
            //   (3) Successful transaction -> Show confirmation or thank you message

            const errorDetail = orderData?.details?.[0];

            if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
                // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                // recoverable state, per
                // https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
                return actions.restart();
            } else if (errorDetail) {
                // (2) Other non-recoverable errors -> Show a failure message
                toastAlert(null, "Error occurred making payment. Contact us or try again", "danger")
                // window.location = `${PAYPAL_FAILED_URL}?token=${orderID}`
                
                throw new Error(
                    `${errorDetail.description} (${orderData.debug_id})`
                );
            } else if (!orderData.purchase_units) {
                toastAlert(null, "Error occurred making payment. Contact us or try again", "danger")
                throw new Error(JSON.stringify(orderData));
            } else {
                // (3) Successful transaction ->
                
                window.location = `${PAYPAL_SUCCESS_URL}?token=${orderID}`
            }


        } ,
        onError: function(err) {
            console.error("Error occurred:", err);
            toastAlert(null, "Error occurred making payment. Contact us or try again", "danger")
            
            setTimeout(() => {
                window.location = `${PAYPAL_FAILED_URL}`

            }, 2000)

        }
    }).render("#paypal-button-container").catch(err => {
        console.log("paypal button render error occurred, using default label")
        document.getElementById("purchase-btn").style.display = 'block';
    });