Server : Apache System : Linux 145.162.205.92.host.secureserver.net 5.14.0-611.45.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Apr 1 05:56:53 EDT 2026 x86_64 User : tradze ( 1001) PHP Version : 8.1.34 Disable Function : NONE Directory :  /home/tradze/www/public/stripe-payment/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

const stripe = Stripe("pk_test_51TAVEuKCFr2zWbFzvrXcEs9DHrfu7e32bSUnFoOa5KD30s6QOQSP84eTeJBu90mkpXdXohWVRCcZQ5EKZvigrtx400MBrvRDPJ");

const elements = stripe.elements();
const card = elements.create("card");
card.mount("#card-element");

const TOKEN = "9GcRqABA0zlP8bBthvSSR1s5A0XsTbr2qMcIESxTrVLPelH310rbmeLQzkim";

const form = document.getElementById("payment-form");

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const payBtn = document.getElementById("payBtn");
    payBtn.disabled = true;
    payBtn.innerText = "Processing...";

    try {

        // ============================
        // STEP 1: CREATE APPOINTMENT
        // ============================

        const appointmentResponse = await fetch("http://127.0.0.1:8000/api/client/new_appointment", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + TOKEN
            },
            body: JSON.stringify({
                postcode: 'N3 3JP',
                address: 'London N3 3JP, UK',
                duration: 187,
                massage: 126,
                date: "2026-03-20",
                hour: "16:30",
                therapists_opt: "1_th",
                selected_therapists: [2536]
            }),
            credentials: "include"
        });

        console.log(appointmentResponse)

        const appointmentData = await appointmentResponse.json();

        if (!appointmentResponse.ok) {
            throw new Error("Failed to create appointment");
        }

        console.log("Appointment:", appointmentData);


        // ============================
        // STEP 2: CREATE PAYMENT METHOD
        // ============================

        const { paymentMethod, error } = await stripe.createPaymentMethod({
            type: "card",
            card: card
        });

        if (error) {
            throw new Error(error.message);
        }


        // ============================
        // STEP 3: CREATE PAYMENT INTENT
        // ============================

        const paymentIntentResponse = await fetch("http://127.0.0.1:8000/api/create-payment-intent", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + TOKEN
            },
            body: JSON.stringify({
                paymentMethodId: paymentMethod.id,
                appointment_id: appointmentData.data?.id // adjust based on API response
            }),
            credentials: "include"
        });

        const paymentData = await paymentIntentResponse.json();

        if (paymentData.error) {
            throw new Error(paymentData.error);
        }

        console.log("Payment Intent:", paymentData);


        // ============================
        // STEP 4: CONFIRM PAYMENT
        // ============================

        const result = await stripe.confirmCardPayment(paymentData.clientSecret, {
            payment_method: paymentMethod.id
        });

        if (result.error) {
            throw new Error(result.error.message);
        }

        if (result.paymentIntent.status === "succeeded") {

            // ============================
            // STEP 5: SUCCESS CALLBACK (OPTIONAL)
            // ============================

            await fetch("process_payment.php", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    paymentIntentId: result.paymentIntent.id,
                    appointment_id: appointmentData.data?.id
                })
            });

            alert("✅ Payment Successful & Appointment Booked!");

        }

    } catch (err) {
        console.error(err);
        alert("❌ " + err.message);
    }

    payBtn.disabled = false;
    payBtn.innerText = "Pay Now";
});