Nueva version con enviroment Pasarela

.app_config

@@ -0,0 +1,2 @@
+apiKey_pasarela=hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4
+imagen_pasarela=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

.env

@@ -5,7 +5,6 @@ APP_MODE = 0
 
 #Variables HMNGY Middleware productivo
 API_URL = https://gateway.calidadbmasconsulting.com
-#API_URL=https://apihmngy.stofactura.com
 API_KEY_DEFINITION = x-api-key
 API_KEY = jNJdG9zBY92NSAALgnEdsoEIRycJiAScB6pBgIADsyg=
 
@@ -38,3 +37,6 @@ DEV_SAP_PASS=
 
 #RUTAS
 CFDI_XML_FILE_URL = ../../facturacion/xml
+
+apiKey_pasarela=hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4
+imagen_pasarela=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

assets/.app_config

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

assets/css/hmngypasarela.css

@@ -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,8 +103,11 @@
 @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%;
   }

assets/js/.env

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

assets/js/hmngy-Pasarela.js

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

assets/js/hmngypasarela.js

@@ -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");
@@ -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);
+
+
 });

config.js

@@ -0,0 +1,4 @@
+// config.js
+var variable1 = "tu-valor-1";
+var variable2 = "tu-valor-2";
+var apiKey = "hmngy-60lXd3pZRePVdSpItDhnC3408GvLDHU4";

header.php

@@ -198,7 +198,7 @@ if (!isset($_SESSION['user_id'])) {
           <a href="./index.php" class="brand-link">
             <!--begin::Brand Image-->
             <img
-              src="assets/images/hmngy_pasarela.webp"
+              src="assets/images/humanergy.png"
               alt="AdminLTE Logo"
               class="brand-image opacity-75 shadow"
             />

pagos.php

@@ -15,8 +15,9 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
 <!-- Soporte para lenguaje HTML -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
+<link rel="stylesheet" href="assets/css/hmngypasarela.css" crossorigin="anonymous"/>
 <style>
-        .modal-header
+        /*.modal-header
         {
             background-image: url('<?php echo $base_url?>/assets/images/header-modalpago.png') !important;
             background-size: 100% !important;
@@ -25,7 +26,7 @@
         .modal-content
         {
             box-shadow: 0px 0px 36px 0px rgba(131, 28, 45, 0.952) !important;
-        }
+        }*/
     </style>
 <main class="app-main">
     <!--begin::App Content Header-->
@@ -36,10 +37,11 @@
                 <!--section stripe-->
                 <div class="d-flex gap-3">
                     <!-- Contenedor flex con separación -->
-                    <button type="button" class="btn btn-block btn-success btn-lg" style="white-space: nowrap;"
+                    <!--button type="button" class="btn btn-block btn-success btn-lg" style="white-space: nowrap;"
                         data-bs-toggle="modal" data-bs-target="#pagoModal">
                         Pagos en Línea
-                    </button>
+                    </button-->
+                    <button onclick="abrirModal()" class="boton-modal">Pagar en Línea</button>
                     <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalCodigo">
                         ¿Como integrar con tu plataforma?
                     </button>
@@ -110,18 +112,32 @@
                                         <ul>
                                             <li>Una vez agregado el codigo, integra el siguiente JS y agregalo despues
                                                 del script que se mostro anteriormente.</li>
-                                              <a href="assets/js/hmngypasarela.js" download>
+                                              <a href="assets/js/hmngy-Pasarela.js" download>
                                               <button type="button">📥 Descargar archivo JS</button>
                                             </a>
                                            <li>Insertar el archivo de esta manera</li>
                                             <pre><code class="language-html">
-&lt;script src="ruta/a/tu/archivo/hmngypasarela.js"&gt;&lt;/script&gt;
+&lt;script src="ruta/a/tu/archivo/hmngy-Pasarela.js"&gt;&lt;/script&gt;
             </code></pre>                     
-                                            <li>Cambiar la variable apiKey por la que se te genero en el registro</li>
+                                           
-                                            <li>en el JS, esta este codig, solo cambiar por la ruta del archivo HTML que trae el modal: fetch('ruta/a/al/archivo/hmngypasarelamodal.html') cambiar </li>
+                                           
 
 
                                         </ul>
+                                        <ul>
+                                            <li>Generar un arhivo llamado <span  style="font-weight: bold; font-size: 1.2rem;">.app_config</span> en la raiz de tu proyecto y coloca la siguiente información</li>
+                                             <pre><code class="language-html">apiKey_pasarela=tu apiKey de Humanergy Pasarela
+imagen_pasarela=tu imagen del header de la pasarela, en Base64
+                                                    </code>
+                                            </pre>  
+                                            <li>puedes descargar el ejemplo de este archivo --> <a href="assets/.app_config" download>
+                                              <button type="button">📥 Descargar archivo .app_config</button>
+                                            </a></li>         
+                                            <li>Cambiar la variable apiKey por la que se te genero en el registro</li>
+                                            <li>Agregar la variable imagen_pasarela con el base64 de la imagen que mas gustes</li>
+                                        </ul>
+
+
 
 
 
@@ -155,73 +171,7 @@
 
 
                 <!--  Seccion de Modal STRIPE   -->
-                <div class="modal fade bd-example-modal-xl" data-backdrop="static" id="pagoModal" tabindex="-1"
+               
-                    aria-labelledby="pagoModalLabel" aria-hidden="true" style="margin-bottom: 20vh;">
-                    <div class="modal-dialog modal-xl">
-                        <div class="modal-content">
-                            <form id="payment-form">
-                                <div class="modal-header d-flex justify-content-center">
-                                    <img src='assets/images/hmngy_pasarela.webp' class="d-block mx-auto" width="20%"
-                                        style="margin-right: 0 !important;" alt="">
-                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
-                                    aria-label="Cerrar"></button>
-                                </div>
-                                <div class="modal-body">
-                                    <!-- Línea 1: Nombre y Correo -->
-                                    <div class="mb-3">
-                                        <label for="nameStripe" class="form-label">
-                                            <FONT color="black">Nombre</FONT>
-                                        </label>
-                                        <input type="nameStripe" class="form-control" id="nameUser" value="" required>
-                                    </div>
-                                    <div class="mb-3">
-                                        <label for="email" class="form-label">
-                                            <FONT color="black">Correo electrónico </FONT><small>(Correo donde se hara
-                                                llegar la notificación de pago)</small>
-                                        </label>
-                                        <input type="email" class="form-control" id="emailUser" value="" required>
-                                    </div>
-                                    <!-- Línea 2: Costo y moneda -->
-                                    <div class="row mb-3">
-                                        <div class="col">
-                                            <label for="amount" class="form-label">
-                                                <FONT color="black">Monto</FONT>
-                                            </label>
-                                            <input type="number" class="form-control" id="amountUser" value="" required>
-                                        </div>
-                                        <div class="col">
-                                            <label for="currency" class="form-label">
-                                                <FONT color="black">Moneda</FONT>
-                                            </label>
-                                            <input id="currency" class="form-select" value="MXN">
-                                        </div>
-                                    </div>
-                                    <!-- Línea 3: Descripción -->
-                                    <div class="mb-3">
-                                        <label for="description" class="form-label">
-                                            <FONT color="black">Descripción</FONT>
-                                        </label>
-                                        <input type="text" class="form-control" id="description" required>
-                                    </div>
-                                    <!-- Línea 4: Tarjeta (Stripe Elements) -->
-                                    <div class="mb-3">
-                                        <label for="card-element" class="form-label">
-                                            <FONT color="black">Datos de tarjeta</FONT>
-                                        </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>
-                                <div class="modal-footer">
-                                    <button type="submit" id="btnstripe" class="btn btn-success">
-                                        <FONT color="black">Pagar</FONT>
-                                    </button>
-                                </div>
-                            </form>
-                        </div>
-                    </div>
-                </div>
                 <!--Sectio stripe-->
 
 

php/logs/form_processor.log

@@ -126,3 +126,11 @@
 {"timestamp":"2025-11-24 16:49:45","level":"success","message":"Usuario enviado a API","context":{"usuario":"DEMO","empresa":"DEMO PASARELA","ip":"127.0.0.1"}}
 {"timestamp":"2025-11-24 16:50:26","level":"debug","message":"Preparando campos para enviar a API","context":{"url":"http:\/\/127.0.0.1:8000\/api\/editUsuario","post_keys":["id","empresa","usuario","email","platf_pago","clave_publica","clave_privada","colorBrand","current_logo"]}}
 {"timestamp":"2025-11-24 16:50:28","level":"success","message":"Usuario enviado a API","context":{"usuario":"DEMO","empresa":"DEMO PASARELA","ip":"127.0.0.1"}}
+{"timestamp":"2025-11-24 18:02:33","level":"debug","message":"Preparando campos para enviar a API","context":{"url":"http:\/\/127.0.0.1:8000\/api\/editUsuario","post_keys":["id","empresa","usuario","email","platf_pago","clave_publica","clave_privada","colorBrand","current_logo"]}}
+{"timestamp":"2025-11-24 18:02:35","level":"success","message":"Usuario enviado a API","context":{"usuario":"DEMO","empresa":"DEMO PASARELA","ip":"127.0.0.1"}}
+{"timestamp":"2025-11-24 18:31:48","level":"debug","message":"Preparando campos para enviar a API","context":{"url":"http:\/\/127.0.0.1:8000\/api\/editUsuario","post_keys":["id","empresa","usuario","email","platf_pago","clave_publica","clave_privada","colorBrand","logo","logo_name","logo_type"]}}
+{"timestamp":"2025-11-24 18:31:48","level":"debug","message":"Estado logo antes de cURL","context":{"tmp_name":"C:\\Users\\User\\AppData\\Local\\Temp\\phpC357.tmp","exists":true,"readable":true,"size":133562,"error":0}}
+{"timestamp":"2025-11-24 18:31:51","level":"success","message":"Usuario enviado a API","context":{"usuario":"DEMO","empresa":"DEMO PASARELA","ip":"127.0.0.1"}}
+{"timestamp":"2025-11-24 19:03:13","level":"debug","message":"Preparando campos para enviar a API","context":{"url":"http:\/\/127.0.0.1:8000\/api\/editUsuario","post_keys":["id","empresa","usuario","email","platf_pago","clave_publica","clave_privada","colorBrand","logo","logo_name","logo_type"]}}
+{"timestamp":"2025-11-24 19:03:13","level":"debug","message":"Estado logo antes de cURL","context":{"tmp_name":"C:\\Users\\User\\AppData\\Local\\Temp\\php9AD4.tmp","exists":true,"readable":true,"size":49976,"error":0}}
+{"timestamp":"2025-11-24 19:03:15","level":"success","message":"Usuario enviado a API","context":{"usuario":"DEMO","empresa":"DEMO PASARELA","ip":"127.0.0.1"}}

portal.php

@@ -7,32 +7,11 @@
         <div class="content-area">
           <h3 class="mb-4">Panel de Administración</h3>
           
-          <!-- Primera fila de botones -->
+          <div class="text-center mb-4">
-          <div class="row text-center">
+            <img src="assets/images/hmngy.png" alt="Humanergy Logo" class="img-fluid" style="max-width: 50vw;">
-            <div class="col-md-3 col-sm-6">
-              <!--a href="#" class="btn btn-admin btn-primary">
-                <i class="fas fa-users-cog"></i> Usuarios
-              </a--><!--EJEMPLO DE BOTON-->
-              <a href="#" class="btn btn-admin btn-success">
-                <i class="fas fa-book"></i>
-              </a>
-            </div>
-            
           </div>
 
-          <!-- Segunda fila de botones -->
-          <div class="row text-center mt-3">
-            <div class="col-md-3 col-sm-6">
 
-            </div>
-          </div>
-          
-          <!-- Tercera fila de botones -->
-          <div class="row text-center mt-3">
-            <div class="col-md-4 col-sm-6">
-
-            </div>
-          </div>
         </div>
       </div>
     </section>

regUsuario.php

@@ -281,8 +281,8 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
       <!--begin::App Content Header-->
     <div class="main-content">
        <div class="form-container">
-            <h1 class="form-title">Registrar Usuario</h1>
+            <h1 class="form-title">Registrar Nueva Pasarela</h1>
-            <p class="form-subtitle">Complete los datos para crear un nuevo usuario en el sistema</p>
+            <p class="form-subtitle">Complete los datos para crear una nueva pasarela en el sistema</p>
 
             <form id="userForm">
                 <div class="form-group">
@@ -291,11 +291,10 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
                            placeholder="Ej: Mi Empresa S.A.">
                 </div>
 
-                <div class="form-group">
+               
-                    <label for="usuario" class="form-label">Nombre de Usuario *</label>
+                <input type="hidden" id="usuario" name="usuario" class="form-input">
-                    <input type="text" id="usuario" name="usuario" class="form-input" required 
+             
-                           placeholder="Ej: admin_empresa">
+                
-                </div>
 
                 <div class="form-group">
                     <label for="email" class="form-label">Correo Electrónico *</label>
@@ -365,6 +364,17 @@ function obtenerNombreCursoPorId($cursos, $idBuscado) {
     }
   });
 </script>
+            <script>
+                    // A. Seleccionamos ambos elementos por su ID
+                    const inputFuente = document.getElementById('empresa');
+                    const inputDestino = document.getElementById('usuario');
+
+                    // B. Agregamos el "escuchador" de eventos
+                    inputFuente.addEventListener('input', function() {
+                        // C. Asignamos el valor del primero al segundo
+                        inputDestino.value = inputFuente.value;
+                    });
+                </script>
 <script>
     // ============================================================================
 // JAVASCRIPT PARA ENVÍO DE FORMULARIO A ARCHIVO PHP

verUsuarios.php

@@ -49,9 +49,9 @@ $url = $ruta.'/api/verUsuarios';
 <table id="tablaUsuarios" class="display" style="width:80%; margin:0 auto;">
     <thead>
         <tr>
-            <th>Usuario</th>
+            <th>id</th>
-            <th>Correo Electronico</th>
             <th>Empresa</th>
+            <th>Correo Electronico</th>
             <th>Plat. Pago</th>
             <th>Llave</th>
             <th>Acciones</th>
@@ -71,9 +71,9 @@ $(document).ready(function() {
     $('#tablaUsuarios').DataTable({
         data: data,
         columns: [
-            { data: 'usuario' },
+            { data: 'id' },
-            { data: 'email' },
             { data: 'empresa' },
+            { data: 'email' },
             { data: 'platf_pago'},
             { data: 'apiKey'},
             {