Archives - Githubissues


# HTML Code for Front-end HTML Code Web Form (donation.html.erb):

<!DOCTYPE html>
<html>
<head>
  <title>Donate to Council for Education</title>
  <script src="https://js.stripe.com/v3/"></script>
</head>
<body>
  <section>
    <h2>Donate to Council for Education</h2>
    <form id="donation-form" action="<%= create_payment_path %>" method="post">
      <label for="donor-name">Your Name:</label>
      <input type="text" id="donor-name" name="donor_name" required><br>

      <label for="donation-amount">Donation Amount:</label>
      <input type="number" id="donation-amount" name="amount" min="50" step="any" required><br>

      <button type="submit">Donate</button>
    </form>
  </section>

  <script>
    // Load Stripe
    var stripe = Stripe('<%= Rails.configuration.stripe[:publishable_key] %>');

    // Handle form submission
    document.getElementById("donation-form").addEventListener("submit", function (event) {
      event.preventDefault();

      var donorName = document.getElementById("donor-name").value;
      var donationAmount = document.getElementById("donation-amount").value;

      // Create a Checkout session on the server
      fetch("<%= create_payment_path %>", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRF-Token": "<%= form_authenticity_token %>"
        },
        body: JSON.stringify({
          donor_name: donorName,
          amount: donationAmount
        }),
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          // Redirect to Stripe Checkout
          return stripe.redirectToCheckout({ sessionId

: session.id });
        })
        .then(function (result) {
          if (result.error) {
            // Handle error
            console.error(result.error.message);
            alert("Payment failed. Please try again.");
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
          alert("An error occurred. Please try again.");
        });
    });
  </script>
</body>
</html>
DevCEDTeam / CED

Archives #68
