hmngy_pasarela_Frontend/assets/js/hmngypasarela.js

var apiKey = "hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4";

function stripeTokenHandler(token) {
  let form = document.getElementById("payment-form");
  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/api/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);

            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);

            const formBody = datos
              .map((pair) =>
                encodeURIComponent(pair.name) + "=" + encodeURIComponent(pair.value)
              )
              .join("&");

            document.getElementById("btnstripe").style.display = "none";
            document.getElementById("mensajePago").innerHTML = `
              Espere un momento. Estamos procesando su pago.
              
            `;

            fetch("http://127.0.0.1:8000/api/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 = `
                    ✅ Pago realizado con éxito. ID Transacción: ${response.idTransaction}
                  `;
                } else {
                  document.getElementById("mensajePago").innerHTML = `
                    ❌ Hubo un error: ${response.error}
                  `;
                  document.getElementById("btnstripe").style.display = "inline-block";
                }
              })
              .catch((error) => {
                console.log(error);
                document.getElementById("mensajePago").innerHTML = `
                  ❌ Error de conexión o del servidor. Intente nuevamente.
                `;
                document.getElementById("btnstripe").style.display = "inline-block";
              });
          }
        });
      });
    })
    .catch((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);
});