Primer Commit
This commit is contained in:
LuisAngelSalinasl
221
assets/js/hmngypasarela.js
Normal file
221
assets/js/hmngypasarela.js
Normal file
@@ -0,0 +1,221 @@
|
||||
var apiKey = "hmngy-yxZHKAcUkSHiET17TlJ_v3qrbIo5JGMr";
|
||||
|
||||
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/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);
|
||||
|
||||
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/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) => {
|
||||
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()">×</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);
|
||||
});
|
||||
Reference in New Issue
Block a user