hmngy_pasarela_Frontend/js/scriptPasarela.js

var apiKey="hmngy-yxZHKAcUkSHiET17TlJ_v3qrbIo5JGMr";

function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  let form = document.getElementById("payment-form");
  // Add Stripe Token to hidden input
  let hiddenInput = document.createElement("input");
  hiddenInput.setAttribute("type", "hidden");
  hiddenInput.setAttribute("name", "stripeToken");
  hiddenInput.setAttribute("value", token.id);
  form.appendChild(hiddenInput);
}

document.addEventListener("DOMContentLoaded", () => {
  
  fetch(`http://127.0.0.1:8000/stripe/obtLavePublicaStripe`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      apiKey: apiKey,
    }),
  })
    .then((response) => response.json())
    .then((data) => {

stripeLlave = data[0].clave_publica;
if(data[0].clave_publica==undefined || data[0].clave_publica==[])
{
    showToast('ApiKey no encontrado', "error");
}

const stripe = Stripe(stripeLlave);
let elements = stripe.elements();

let style = {
  base: {
    color: "#32325d",
    lineHeight: "24px",
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: "antialiased",
    fontSize: "16px",
    "::placeholder": {
      color: "#aab7c4",
    },
  },
  invalid: {
    color: "#fa755a",
    iconColor: "#fa755a",
  },
};

let card = elements.create("card", { style: style });
card.mount("#card-element");

card.addEventListener("change", function (event) {
  let displayError = document.getElementById("card-errors");
  displayError.textContent = event.error ? event.error.message : "";
});

let form = document.getElementById("payment-form");
form.addEventListener("submit", function (event) {
  event.preventDefault();

  let cantidad = document.getElementById("amountUser").value;
  let currency = document.getElementById("currency").value;
  let emailUser = document.getElementById("emailUser").value;
  let descripcion = document.getElementById("description").value;
  let nameUsuario = document.getElementById("nameUser").value;

  console.log("PASO 1");

  stripe.createToken(card).then(function (result) {
    if (result.error) {
      document.getElementById("card-errors").textContent = result.error.message;
      document.getElementById("btnstripe").removeAttribute("disabled");
    } else {
      stripeTokenHandler(result.token);

      // Serializar el formulario manualmente
      let datos = [];
      const formElements = form.querySelectorAll("input, select, textarea");
      formElements.forEach((el) => {
        if (el.name && !el.disabled) {
          datos.push({ name: el.name, value: el.value });
        }
      });

      datos.push({ name: "amount", value: cantidad });
      datos.push({ name: "name", value: nameUsuario });
      datos.push({ name: "currency", value: currency });
      datos.push({ name: "email", value: emailUser });
      datos.push({ name: "descripcion", value: descripcion });
      datos.push({ name: "urlbase", value: window.location.origin });
      datos.push({ name: "apiKey", value: apiKey});

      console.log("DATOS ENVIADOS:", datos);

      // Convertir datos a application/x-www-form-urlencoded
      const formBody = datos
        .map(
          (pair) =>
            encodeURIComponent(pair.name) + "=" + encodeURIComponent(pair.value)
        )
        .join("&");

      document.getElementById("btnstripe").style.display = "none";
      document.getElementById("mensajePago").innerHTML = `
        <p>Espere un momento. Estamos procesando su pago.</p>
        <div class='spinner-border text-warning' role='status'><span class='sr-only'></span></div>
      `;

      fetch("http://127.0.0.1:8000/stripe/createPayment", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        body: formBody,
      })
        .then((response) => response.json())
        .then((response) => {
          console.log(response.success);
          if (response.success) {
            document.getElementById("mensajePago").innerHTML = `
              <p class='text-success'>✅ Pago realizado con éxito. ID Transacción: ${response.idTransaction}</p>
            `;
          } else {
            document.getElementById("mensajePago").innerHTML = `
              <p class='text-danger'>❌ Hubo un error: ${response.error}</p>
            `;
            document.getElementById("btnstripe").style.display = "inline-block";
          }
        })
        .catch((error) => {
          console.log(error);
          document.getElementById("mensajePago").innerHTML = `
            <p class='text-danger'>❌ Error de conexión o del servidor. Intente nuevamente.</p>
          `;
          document.getElementById("btnstripe").style.display = "inline-block";
        });
    }
  });
});

    })
    .catch((error) => {
      //console.error("Error al obtener usuarios:", error);
      showToast('Error: ApiKey no encontrado', "error");
    });
});

function abrirModal() {
    const modal = document.getElementById("miModal");
    const contenido = document.getElementById("modalContenido");

    modal.style.display = "flex";
    contenido.classList.remove("animar-salida");
    setTimeout(() => contenido.classList.add("animar-entrada"), 10);
  }

  function cerrarModal() {
    const modal = document.getElementById("miModal");
    const contenido = document.getElementById("modalContenido");

    contenido.classList.remove("animar-entrada");
    contenido.classList.add("animar-salida");

    setTimeout(() => modal.style.display = "none", 300);
  }

  document.addEventListener("DOMContentLoaded", function () {
  const modalHTML = `
<!-- MODAL PERSONALIZADO -->
<div id="miModal" class="modal-personalizado">
  <div class="modal-contenido animar-entrada" id="modalContenido">
    <form id="payment-form">
      <!-- Header con imagen -->
      <div class="modal-header-personalizada">
        <img src="assets/images/hmngy_pasarela.webp" alt="" width="20%" style="display:block; margin: 0 auto;">
        <span class="cerrar" onclick="cerrarModal()">&times;</span>
      </div>

      <!-- Cuerpo del modal -->
      <div class="modal-body">
        <div class="mb-3">
          <label for="nameStripe">Nombre</label>
          <input type="text" id="nameUser" class="form-control" required>
        </div>

        <div class="mb-3">
          <label for="email">Correo electrónico <small>(donde se enviará la notificación de pago)</small></label>
          <input type="email" id="emailUser" class="form-control" required>
        </div>

        <div class="row mb-3">
          <div class="col">
            <label for="amount">Monto</label>
            <input type="number" id="amountUser" class="form-control" required>
          </div>
          <div class="col">
            <label for="currency">Moneda</label>
            <input type="text" id="currency" class="form-select" value="MXN" required>
          </div>
        </div>

        <div class="mb-3">
          <label for="description">Descripción</label>
          <input type="text" id="description" class="form-control" required>
        </div>

        <div class="mb-3">
          <label for="card-element">Datos de tarjeta</label>
          <div id="card-element" class="form-control py-3"></div>
          <div id="card-errors" class="text-danger mt-2" role="alert"></div>
        </div>

        <div id="mensajePago" class="mb-3"></div>
      </div>

      <!-- Footer con botón -->
      <div class="modal-footer">
        <button type="submit" id="btnstripe" class="btn btn-success">Pagar</button>
      </div>
    </form>
  </div>
</div>
  `;
  document.body.insertAdjacentHTML("beforeend", modalHTML);
});