Embed

<div class="betaling-wrapper">
  <div class="logo-container">
    <img src="https://i.imgur.com/BOqyHHr.jpeg" alt="Taxi Snel Thuis logo">
  </div>

  <div class="betaling-container">
    <h2>💳 Bevestig je betaling</h2>
    <p>Controleer hieronder je rit- en klantgegevens voordat je afrondt.</p>

    <div class="overzicht" id="overzichtBox"></div>

    <p class="btw-text">Inclusief 9% btw</p>
    <button class="betaling-knop" id="payBtn" onclick="startBetaling()">💳 Bevestig en betaal</button>
    <p id="payMsg" style="margin-top:10px;"></p>
  </div>
</div>

<script>
// ✅ Toon overzicht van alle gegevens
document.addEventListener("DOMContentLoaded", () => {
  const klant = JSON.parse(localStorage.getItem("klantGegevens"));
  const rit   = JSON.parse(localStorage.getItem("ritGegevens"));
  if (!klant || !rit) return alert("❗ Gegevens niet gevonden. Begin opnieuw met boeken.");

  const overzicht = `
    <h3>🧍 Klant</h3>
    <p><strong>Naam:</strong> ${klant.voornaam} ${klant.achternaam}</p>
    <p><strong>E-mail:</strong> ${klant.email}</p>
    <p><strong>Telefoon:</strong> ${klant.telefoon}</p>

    <h3>📍 Ritgegevens</h3>
    <p><strong>Ophaaladres:</strong> ${rit.pickup}</p>
    <p><strong>Bestemming:</strong> ${rit.destination}</p>
    <p><strong>Vertrektijd:</strong> ${rit.datetime ? new Date(rit.datetime).toLocaleString() : "-"}</p>
    <p><strong>Aantal reizigers:</strong> ${rit.passengers ?? "-"}</p>
    <p><strong>Bagage:</strong> ${rit.baggage ?? "-"}</p>
    <p><strong>Type rit:</strong> ${rit.tripType ?? "-"}</p>

    <h3>🚘 Voertuig</h3>
    <p><strong>Type:</strong> ${rit.voertuig ?? "-"}</p>
    <p><strong>Extra opties:</strong> ${(rit.extraOptions && rit.extraOptions.length) ? rit.extraOptions.join(", ") : "Geen"}</p>

    <h3>💰 Totaalbedrag</h3>
    <p class="prijs">€ ${Number(rit.prijs).toFixed(2)}</p>
  `;
  document.getElementById("overzichtBox").innerHTML = overzicht;
});

// ✅ Betaling starten via je Cloudflare Worker -> Mollie
async function startBetaling() {
  const klant = JSON.parse(localStorage.getItem("klantGegevens"));
  const rit   = JSON.parse(localStorage.getItem("ritGegevens"));
  if (!klant || !rit) {
    alert("❗ Gegevens niet gevonden. Begin opnieuw met boeken.");
    return;
  }

  const btn = document.getElementById("payBtn");
  const msg = document.getElementById("payMsg");
  btn.disabled = true;
  btn.textContent = "⏳ Bezig met betalen...";
  msg.textContent = "";

  // Mollie verwacht bedrag als string met 2 decimalen
  const value = Number(rit.prijs || 0).toFixed(2);

  try {
    const res = await fetch("https://cool-queen-ed34.taxisnelthuis.workers.dev/", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        amount: { currency: "EUR", value },
        description: "Taxi betaling",
        redirectUrl: "https://alltaxisnelthuis.com/bedankt",

        // 🆕 Minimale toevoeging (1): webhookUrl voor jouw Worker (paid → mails versturen)
        webhookUrl: "https://cool-queen-ed34.taxisnelthuis.workers.dev/webhook",

        // Metadata voor mail-opbouw
        metadata: {
          klantNaam: `${klant.voornaam} ${klant.achternaam}`,
          email: klant.email,
          telefoon: klant.telefoon,
          pickup: rit.pickup,
          destination: rit.destination,
          voertuig: rit.voertuig,
          tripType: rit.tripType,
          prijs: value,

          // 🆕 Minimale toevoeging (2): jouw bedrijfs-mail voor kopie
          companyEmail: "taxisnelthuis@gmail.com"
        }
      })
    });

    const data = await res.json();

    if (!res.ok || !data.checkoutUrl) {
      console.error("Worker/Mollie fout:", data);
      throw new Error("Betaling kon niet worden aangemaakt.");
    }

    // 🔁 Door naar Mollie
    window.location.href = data.checkoutUrl;

  } catch (e) {
    console.error(e);
    msg.textContent = "❌ Er ging iets mis met starten van de betaling. Probeer opnieuw.";
    btn.disabled = false;
    btn.textContent = "💳 Bevestig en betaal";
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
body {
  background: radial-gradient(circle at center,#0a0a0a,#1a1a1a);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  text-align: center;
}
.logo-container img {
  max-width: 200px;
  margin-top: 25px;
  border-radius: 12px;
  filter: drop-shadow(0 0 25px rgba(255,215,0,0.5));
}
.betaling-container {
  max-width: 650px;
  margin: 30px auto;
  background: linear-gradient(180deg,rgba(30,30,30,0.95),rgba(0,0,0,0.98));
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(255,215,0,0.25);
  border: 1px solid rgba(255,215,0,0.3);
}
h2 { color: gold; font-size: 1.8rem; margin-bottom: 10px; }
.overzicht {
  text-align: left;
  background: rgba(255,255,255,0.05);
  padding: 20px;
  border-radius: 10px;
  margin-top: 15px;
}
.overzicht h3 { color: gold; margin-top: 15px; }
.overzicht p { margin: 4px 0; font-size: 1rem; }
.prijs { font-size: 1.6rem; color: gold; font-weight: 600; text-align: center; }
.btw-text { color: #bbb; margin-top: 10px; font-size: 0.95rem; }
.betaling-knop {
  margin-top: 25px;
  padding: 15px 30px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg,gold,#ffb700);
  color: #000;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 15px rgba(255,215,0,0.3);
}
.betaling-knop:hover {
  background: #000;
  color: gold;
  border: 1px solid gold;
  transform: scale(1.03);
}
</style>


TaxiSnelThuis

TaxiSnelThuis is a newly launched taxi service based in Rijen, Netherlands, offering an online booking platform that automatically calculates travel distance between pickup locations and final destinations. As a startup, the company focuses on providing convenient, distance‑aware ride scheduling for local customers.