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

100
pagos.php
View File

@@ -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-->