Embed

<section class="payment-section">
  <div class="payment-container">
    <h2 id="payment-title">💳 Make a Secure Payment</h2>
    <form id="paymentForm" class="payment-form">
      <div class="payment-grid">
        <div class="payment-field">
          <label for="customer_name">Full Name</label>
          <input type="text" id="customer_name" name="customer_name" required>
        </div>

        <div class="payment-field">
          <label for="customer_email">Email Address</label>
          <input type="email" id="customer_email" name="customer_email" required>
        </div>

        <div class="payment-field">
          <label for="amount">Amount (USD)</label>
          <input type="number" step="0.01" id="amount" name="amount" required>
        </div>

        <div class="payment-field">
          <label for="currency">Currency</label>
          <select id="currency" name="currency" required>
            <option value="USD" selected>USD</option>
            <option value="XAF">XAF</option>
            <option value="EUR">EUR</option>
          </select>
        </div>

        <div class="payment-field" style="grid-column: span 2;">
          <label for="details">Payment Details</label>
          <input type="text" id="details" name="details" placeholder="e.g., Membership Fee" required>
        </div>
      </div>

      <button type="submit" id="payButton">Proceed to Pay</button>
    </form>

    <div id="paymentMessage" class="payment-message"></div>
  </div>
</section>

<style>
  .payment-section {
    padding: 50px 20px;
    background: linear-gradient(135deg, #f8faff, #eef3f8);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .payment-container {
    background: white;
    border-radius: 12px;
    padding: 35px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    max-width: 650px;
    width: 100%;
  }

  #payment-title {
    text-align: center;
    margin-bottom: 25px;
    color: #007bff;
    font-size: 26px;
    font-weight: bold;
  }

  .payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .payment-field {
    display: flex;
    flex-direction: column;
  }

  .payment-field label {
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
  }

  .payment-field input, .payment-field select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    transition: border 0.3s;
  }

  .payment-field input:focus, .payment-field select:focus {
    border-color: #007bff;
    outline: none;
  }

  #payButton {
    margin-top: 25px;
    width: 100%;
    padding: 14px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
  }

  #payButton:hover {
    background: #218838;
  }

  .payment-message {
    margin-top: 20px;
    text-align: center;
    font-size: 15px;
    color: #dc3545;
  }

  @media (max-width: 700px) {
    .payment-grid {
      grid-template-columns: 1fr;
    }
    #payment-title {
      font-size: 22px;
    }
  }
</style>

<script>
  document.getElementById("paymentForm").addEventListener("submit", async function(e) {
    e.preventDefault();
    const payButton = document.getElementById("payButton");
    const messageBox = document.getElementById("paymentMessage");

    payButton.disabled = true;
    messageBox.textContent = "⏳ Initiating payment... please wait.";

    const formData = {
      customer_name: document.getElementById("customer_name").value.trim(),
      customer_email: document.getElementById("customer_email").value.trim(),
      amount: document.getElementById("amount").value.trim(),
      currency: document.getElementById("currency").value.trim(),
      details: document.getElementById("details").value.trim()
    };

    try {
      const response = await fetch("https://talindigital.com/cartpayment.php", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(formData)
      });

      const data = await response.json();

      if (data.success) {
        messageBox.style.color = "green";
        messageBox.textContent = "✅ Redirecting to secure checkout...";
        window.location.href = data.redirect_url;
      } else {
        messageBox.style.color = "red";
        messageBox.textContent = "❌ " + (data.message || "Payment initiation failed.");
        console.error("Payment Error:", data.raw_response || data);
      }
    } catch (err) {
      messageBox.style.color = "red";
      messageBox.textContent = "❌ Unable to connect to payment server.";
      console.error("Network Error:", err);
    } finally {
      payButton.disabled = false;
    }
  });
</script>

Africa Dream Water

Providing clean drinking water to communities in Africa. People donante money and we mount projects to provide drinking water to communities in Africa. include dashborad, donation page, impact page, payment page, notification page, contact page