proyecto-final/tienda/static/js/checkout.js

const getCookie = (name) => {
    let cookieValue = null;
    if (document.cookie && document.cookie !== "") {
        const cookies = document.cookie.split(";");
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + "=")) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
};

document.addEventListener("DOMContentLoaded", () => {
    const button = document.getElementById("checkout-button");
    console.log("Button found:", button);
    
    if (!button) {
        console.error("Checkout button not found");
        return;
    }

    const configUrl = button.dataset.configUrl;
    const sessionUrl = button.dataset.sessionUrl;
    
    console.log("Config URL:", configUrl);
    console.log("Session URL:", sessionUrl);

    fetch(configUrl)
        .then((result) => {
            console.log("Config response status:", result.status);
            return result.json();
        })
        .then((data) => {
            console.log("Config data:", data);
            
            if (!data.publicKey) {
                console.error("No publicKey in response");
                return;
            }
            
            const stripe = Stripe(data.publicKey);
            console.log("Stripe initialized");

            button.addEventListener("click", () => {
                const shippingAddressSelect = document.getElementById("shipping-address");
                const selectedShippingAddress = shippingAddressSelect ? shippingAddressSelect.value : "";

                if (!selectedShippingAddress) {
                    alert("Selecciona una dirección de envío para continuar.");
                    return;
                }

                console.log("Checkout button clicked");
                button.disabled = true;
                button.innerHTML = "Procesando...";

                fetch(sessionUrl, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRFToken": getCookie("csrftoken")
                    },
                    body: JSON.stringify({
                        shipping_address_id: selectedShippingAddress
                    })
                })
                    .then((res) => {
                        console.log("Session response status:", res.status);
                        return res.json();
                    })
                    .then((data) => {
                        console.log("Session data:", data);
                        
                        if (data.sessionId) {
                            console.log("Redirecting to Stripe Checkout with session:", data.sessionId);
                            return stripe.redirectToCheckout({ sessionId: data.sessionId });
                        } else if (data.error) {
                            alert("Error: " + data.error);
                            button.disabled = false;
                            button.innerHTML = "Pagar con Stripe";
                        } else {
                            alert("Error desconocido al procesar el pago");
                            button.disabled = false;
                            button.innerHTML = "Pagar con Stripe";
                        }
                    })
                    .catch((error) => {
                        console.error("Fetch error:", error);
                        alert("Error de conexión: " + error.message);
                        button.disabled = false;
                        button.innerHTML = "Pagar con Stripe";
                    });
            });
        })
        .catch((error) => {
            console.error("Config fetch error:", error);
            alert("Error al cargar la configuración de pago: " + error.message);
        });
});