249 lines
14 KiB
PHP
249 lines
14 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>
|
|
<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 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/hmngypasarela.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/hmngypasarela.js"></script>
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
</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 -->
|
|
<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-->
|
|
|
|
|
|
<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"; ?>
|