199 lines
11 KiB
PHP
199 lines
11 KiB
PHP
<?php
|
|
include "header.php";
|
|
include __DIR__ . "/php/funciones.php";
|
|
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? "https" : "http";
|
|
$host = $_SERVER['HTTP_HOST'];
|
|
|
|
$base_url = $scheme . '://' . $host;
|
|
?>
|
|
|
|
|
|
|
|
<!-- Prism CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" />
|
|
<!-- Prism JS -->
|
|
<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
|
|
{
|
|
background-image: url('<?php echo $base_url?>/assets/images/header-modalpago.png') !important;
|
|
background-size: 100% !important;
|
|
background-repeat: no-repeat !important;
|
|
}
|
|
.modal-content
|
|
{
|
|
box-shadow: 0px 0px 36px 0px rgba(131, 28, 45, 0.952) !important;
|
|
}*/
|
|
</style>
|
|
<main class="app-main">
|
|
<!--begin::App Content Header-->
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="content-area">
|
|
<h1>Generador de pago en Linea</h1>
|
|
<!--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;"
|
|
data-bs-toggle="modal" data-bs-target="#pagoModal">
|
|
Pagos en Línea
|
|
</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>
|
|
</div>
|
|
<!-- Modal Bootstrap con código -->
|
|
<!-- Modal con pestañas -->
|
|
<div class="modal fade" id="modalCodigo" tabindex="-1" aria-labelledby="modalCodigoLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalCodigoLabel"><FONT color="white">Integración de Pasarelas</FONT></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<!-- Nav tabs -->
|
|
<ul class="nav nav-tabs" id="codigoTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="stripe-tab" data-bs-toggle="tab"
|
|
data-bs-target="#stripe" type="button" role="tab">Stripe</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="openpay-tab" data-bs-toggle="tab"
|
|
data-bs-target="#openpay" type="button" role="tab">OpenPay</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="otro-tab" data-bs-toggle="tab"
|
|
data-bs-target="#otro" type="button" role="tab">Otra</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tab panes -->
|
|
<div class="tab-content pt-3">
|
|
<div class="tab-pane fade show active" id="stripe" role="tabpanel">
|
|
<p><strong>Requisitos:</strong></p>
|
|
|
|
<ul>
|
|
<li>HTML 5 <small>(En caso de usar tu FrontEnd en HTML)</small></li>
|
|
<li>Asegúrate de tener una cuenta activa en <a
|
|
href="https://dashboard.stripe.com/" target="_blank">Stripe</a>.
|
|
</li>
|
|
<li>Revisa si estas registrado en nuestra plataforma y cargado las llaves de
|
|
STRIPE.</li>
|
|
<li>Obten tu apiKey de Humanergy Pasarela y coloca en el script JS <small> (Ver instrucciones del script)</small></li>
|
|
</ul>
|
|
|
|
<p><strong>Instrucciones:</strong></p>
|
|
<ul>
|
|
<li>Este código implementa el formulario básico de pagos con Stripe.</li>
|
|
<li>Integrar este estilo en el html</li>
|
|
<a href="assets/css/hmngypasarela.css" download>
|
|
<button type="button">📥 Descargar archivo CSS</button>
|
|
</a>
|
|
<li>Inserta el CSS en el header de tu archivo HTML </li>
|
|
<pre><code class="language-html"><link rel="stylesheet" href="ruta/a/tu/archivo/hmngypasarela.css" crossorigin="anonymous"/>
|
|
</code></pre>
|
|
<li>Agregar el boton para abrir modal en el lugar que prefieras en tu archivo </li>
|
|
<pre><code class="language-html"><button onclick="abrirModal()" class="boton-modal">Pagar en Línea</button>
|
|
</code></pre>
|
|
<li>Coloca el siguiente script al final de tu HTML, antes de terminar la
|
|
etiqueta <code></body></code>.</li>
|
|
<pre><code class="language-html">
|
|
<script src="https://js.stripe.com/v3"></script>
|
|
</code></pre>
|
|
</ul>
|
|
<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/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">
|
|
<script src="ruta/a/tu/archivo/hmngy-Pasarela.js"></script>
|
|
</code></pre>
|
|
|
|
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="openpay" role="tabpanel">
|
|
<ul>
|
|
|
|
<pre><code class="language-html">
|
|
Pronto Disponible la documentacion
|
|
</code></pre>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="otro" role="tabpanel">
|
|
<ul>
|
|
|
|
<pre><code class="language-html">
|
|
Pronto Disponible la documentacion
|
|
</code></pre>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Seccion de Modal STRIPE -->
|
|
|
|
<!--Sectio stripe-->
|
|
|
|
|
|
<div class="modal fade" id="pagoexitoso" tabindex="-1" aria-labelledby="pagoModalLabel"
|
|
aria-hidden="true">
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.js"
|
|
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous">
|
|
</script>
|
|
<script src="https://js.stripe.com/v3/"></script>
|
|
<script src="assets/js/hmngypasarela.js"></script>
|
|
<!--script src="js/scriptPasarela.js"></script-->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div id="toast" class="toast"></div>
|
|
<script>function showToast(message, type = 'success') {
|
|
const toast = document.getElementById("toast");
|
|
toast.className = `toast show ${type}`;
|
|
toast.innerText = message;
|
|
setTimeout(() => {
|
|
toast.className = toast.className.replace("show", "");
|
|
}, 3000); // se oculta después de 3 segundos
|
|
}</script>
|
|
<?php include "footer.php"; ?>
|