developer/hmngy_pasarela_Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Nueva version con enviroment Pasarela

Browse Source
This commit is contained in:
User
2025-11-28 11:33:55 -06:00
parent e0b0e6346b
commit 4e074fa0f0
15 changed files with 382 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/.app_config Normal file
View File

@@ -0,0 +1,2 @@
apiKey_pasarela=your apiKey Humanergy Pasarela
imagen_pasarela=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

8
assets/css/hmngypasarela.css
View File

@@ -12,7 +12,7 @@
.modal-personalizado {
display: none;
position: fixed;
z-index: 1000;
z-index: 1078;
left: 0;
top: 0;
width: 100vw;
@@ -35,6 +35,8 @@
transition: all 0.3s ease;
box-sizing: border-box;
position: relative;
max-height: 100vh; /* Limita la altura máxima del modal al 90% del viewport */
overflow-y: auto; /* Habilita el scroll vertical si el contenido excede la altura */
}
.animar-entrada {
@@ -48,7 +50,6 @@
}
.modal-header-personalizada {
background-image: url('https://pasarela.test/assets/images/header-modalpago.png');
background-size: 100% !important;
background-repeat: no-repeat !important;
padding: 40px 20px 60px 20px;
@@ -102,7 +103,10 @@
@media (max-width: 600px) {
.modal-contenido {
max-width: 95%;
max-height: 90vh; /* Limita la altura máxima del modal al 90% del viewport */
overflow-y: auto; /* Habilita el scroll vertical si el contenido excede la altura */
}
.modal-header-personalizada img {
width: 50%;

BIN
assets/images/hmngy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

1
assets/js/.env Normal file
View File

@@ -0,0 +1 @@
API_KEY=hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4

261
assets/js/hmngy-Pasarela.js Normal file
View File

@@ -0,0 +1,261 @@
var apiKey;
var imagen_pasarela;
async function cargarEnv() {
const response = await fetch('.app_config');
const texto = await response.text();
const env = {};
texto.split('\n').forEach(linea => {
// Ignorar comentarios y líneas vacías
if (linea.trim() && !linea.startsWith('#')) {
const [clave, ...valores] = linea.split('=');
env[clave.trim()] = valores.join('=').trim();
}
});
return env;
}
// Usar
cargarEnv().then(env => {
// Usar las variables
apiKey = env.apiKey_pasarela;
imagen_pasarela = env.imagen_pasarela;
});
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("https://gateway.calidadbmasconsulting.com/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("https://gateway.calidadbmasconsulting.com/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}
`;
card.clear();
} else {
document.getElementById("mensajePago").innerHTML = `
❌ Hubo un error: ${response.error}
`;
card.clear();
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.
`;
card.clear();
document.getElementById("btnstripe").style.display = "inline-block";
});
}
});
});
})
.catch((error) => {
showToast("Error: ApiKey no encontrado", "error");
});
});
window.abrirModal = function() {
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);
}
window.cerrarModal = function() {
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">Nombre123</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);
// Crear la URL completa
const base64Url = `data:image/webp;base64,${imagen_pasarela}`;
// Cambiar solo la imagen del CSS
const header = document.querySelector(".modal-header-personalizada");
header.style.backgroundImage = `url('${base64Url}')`;
const script = document.createElement('script');
script.src = '../../config.js';
script.type = 'text/javascript';
document.body.appendChild(script);
});

50
assets/js/hmngypasarela.js
View File

@@ -1,4 +1,28 @@
var apiKey = "hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4";
var apiKey;
var imagen_pasarela;
async function cargarEnv() {
const response = await fetch('.app_config');
const texto = await response.text();
const env = {};
texto.split('\n').forEach(linea => {
// Ignorar comentarios y líneas vacías
if (linea.trim() && !linea.startsWith('#')) {
const [clave, ...valores] = linea.split('=');
env[clave.trim()] = valores.join('=').trim();
}
});
return env;
}
// Usar
cargarEnv().then(env => {
// Usar las variables
apiKey = env.apiKey_pasarela;
imagen_pasarela = env.imagen_pasarela;
});
function stripeTokenHandler(token) {
let form = document.getElementById("payment-form");
@@ -10,7 +34,7 @@ function stripeTokenHandler(token) {
}
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("DOMContentLoaded", () => {
fetch("http://127.0.0.1:8000/api/obtLavePublicaStripe", {
method: "POST",
headers: {
@@ -118,10 +142,12 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("mensajePago").innerHTML = `
✅ Pago realizado con éxito. ID Transacción: ${response.idTransaction}
`;
card.clear();
} else {
document.getElementById("mensajePago").innerHTML = `
❌ Hubo un error: ${response.error}
`;
card.clear();
document.getElementById("btnstripe").style.display = "inline-block";
}
})
@@ -130,6 +156,7 @@ document.addEventListener("DOMContentLoaded", () => {
document.getElementById("mensajePago").innerHTML = `
❌ Error de conexión o del servidor. Intente nuevamente.
`;
card.clear();
document.getElementById("btnstripe").style.display = "inline-block";
});
}
@@ -141,7 +168,7 @@ document.addEventListener("DOMContentLoaded", () => {
});
});
function abrirModal() {
window.abrirModal = function() {
const modal = document.getElementById("miModal");
const contenido = document.getElementById("modalContenido");
@@ -150,7 +177,7 @@ function abrirModal() {
setTimeout(() => contenido.classList.add("animar-entrada"), 10);
}
function cerrarModal() {
window.cerrarModal = function() {
const modal = document.getElementById("miModal");
const contenido = document.getElementById("modalContenido");
@@ -175,7 +202,7 @@ function cerrarModal() {
<!-- Cuerpo del modal -->
<div class="modal-body">
<div class="mb-3">
<label for="nameStripe">Nombre</label>
<label for="nameStripe">Nombre123</label>
<input type="text" id="nameUser" class="form-control" required>
</div>
@@ -218,4 +245,17 @@ function cerrarModal() {
</div>
`;
document.body.insertAdjacentHTML("beforeend", modalHTML);
// Crear la URL completa
const base64Url = `data:image/webp;base64,${imagen_pasarela}`;
// Cambiar solo la imagen del CSS
const header = document.querySelector(".modal-header-personalizada");
header.style.backgroundImage = `url('${base64Url}')`;
const script = document.createElement('script');
script.src = '../../config.js';
script.type = 'text/javascript';
document.body.appendChild(script);
});