Generador de pago en Linea

Requisitos:

• HTML 5 (En caso de usar tu FrontEnd en HTML)
• Asegúrate de tener una cuenta activa en Stripe.
• Revisa si estas registrado en nuestra plataforma y cargado las llaves de STRIPE.
• Obten tu apiKey de Humanergy Pasarela y coloca en el script JS (Ver instrucciones del script)

Instrucciones:

• Este código implementa el formulario básico de pagos con Stripe.
• Integrar este estilo en el html

.boton-modal {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.modal-personalizado {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.modal-contenido {
  background: white;
  width: 100%;
  max-width: 720px;
  border-radius: 12px;
  box-shadow: 0px 0px 36px 0px rgba(131, 28, 45, 0.952);
  transform: scale(0.7);
  opacity: 0;
  transition: all 0.3s ease;
  box-sizing: border-box;
  position: relative;
}

.animar-entrada {
  transform: scale(1);
  opacity: 1;
}

.animar-salida {
  transform: scale(0.7);
  opacity: 0;
}

.modal-header-personalizada {
  background-image: url('/assets/images/header-modalpago.png');
  background-size: 100% !important;
  background-repeat: no-repeat !important;
  padding: 40px 20px 60px 20px;
  position: relative;
  text-align: center;
}

.cerrar {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
}

.modal-body, .modal-footer {
  padding: 20px;
}

.form-control, .form-select {
  width: 100%;
  padding: 10px;
  margin-top: 4px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.col {
  flex: 1;
  min-width: 150px;
}

.btn-success {
  padding: 10px 20px;
  background-color: #28a745;
  color: black;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

@media (max-width: 600px) {
  .modal-contenido {
    max-width: 95%;
  }

  .modal-header-personalizada img {
    width: 50%;
  }

  .cerrar {
    font-size: 20px;
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0.25em solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff; /* Color azul típico */
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

• Agregar el boton para abrir modal

<button onclick="abrirModal()" class="boton-modal">Pagar en Línea</button>
                                            

• Coloca el siguiente script al final de tu HTML, antes de terminar la etiqueta </body>.

<script src="https://js.stripe.com/v3"></script>
            

• Una vez agregado el codigo, integra el siguiente JS y agregalo despues del script que se mostro anteriormente. Como ejemplo:

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(`/stripe/obtLavePublicaStripe`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      apiKey: "Aqui va tu apiKey de HMNGY Pasarela", //este apKey es por usuario
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      console.log("data:", data[0].clave_publica);
      stripeLlave = data[0].clave_publica;

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

            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 = `
              
Espere un momento. Estamos procesando su pago.
              

            `;

            fetch("/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 = `
                    
✅ 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) => {
      console.error("Error al obtener usuarios:", 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);
}