<!DOCTYPE html>
<html>
<head>
  <title>Donate</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <h2>Support us with a donation</h2>
  <form id="donation-form">
    <label>Amount (USD):</label>
    <input type="number" id="amount" min="1" step="0.01" required>
    <div id="card-element"></div>
    <button type="submit">Donate</button>
  </form>
  <div id="result"></div>

  <script>
    const stripe = Stripe("pk_test_your_publishable_key_here");

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

    document.getElementById("donation-form").addEventListener("submit", async (e) => {
      e.preventDefault();
      const amount = document.getElementById("amount").value;

      const res = await fetch("/create-payment-intent", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({amount})
      });
      const { clientSecret } = await res.json();

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

      if (result.error) {
        document.getElementById("result").innerText = result.error.message;
      } else if (result.paymentIntent.status === "succeeded") {
        document.getElementById("result").innerText = "✅ Thank you for your donation!";
      }
    });
  </script>
</body>
</html>
