Primer Commit
This commit is contained in:
LuisAngelSalinasl
525
prueba.php
Normal file
525
prueba.php
Normal file
@@ -0,0 +1,525 @@
|
||||
<?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>
|
||||
<pre><code class="language-css">
|
||||
.boton-modal {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-personalizado {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-contenido {
|
||||
background: white;
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px 0px 36px 0px rgba(131, 28, 45, 0.952);
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.animar-entrada {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.animar-salida {
|
||||
transform: scale(0.7);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal-header-personalizada {
|
||||
background-image: url('<?php echo $ruta?>/assets/images/header-modalpago.png');
|
||||
background-size: 100% !important;
|
||||
background-repeat: no-repeat !important;
|
||||
padding: 40px 20px 60px 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cerrar {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal-body, .modal-footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-control, .form-select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 4px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
padding: 10px 20px;
|
||||
background-color: #28a745;
|
||||
color: black;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.modal-contenido {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.modal-header-personalizada img {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cerrar {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: 0.25em solid rgba(0, 0, 0, 0.1);
|
||||
border-top-color: #007bff; /* Color azul típico */
|
||||
border-radius: 50%;
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
</code></pre>
|
||||
<li>Agregar el boton para abrir modal </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. Como ejemplo:</li>
|
||||
<pre><code class="language-js">
|
||||
function stripeTokenHandler(token) {
|
||||
// Insert the token ID into the form so it gets submitted to the server
|
||||
let form = document.getElementById("payment-form");
|
||||
// Add Stripe Token to hidden input
|
||||
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(`<?php echo $ruta;?>/stripe/obtLavePublicaStripe`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Accept: "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
apiKey: "Aqui va tu apiKey de HMNGY Pasarela", //este apKey es por usuario
|
||||
}),
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("data:", data[0].clave_publica);
|
||||
stripeLlave = data[0].clave_publica;
|
||||
|
||||
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);
|
||||
|
||||
// Serializar el formulario manualmente
|
||||
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 });
|
||||
|
||||
console.log("DATOS ENVIADOS:", datos);
|
||||
|
||||
// Convertir datos a application/x-www-form-urlencoded
|
||||
const formBody = datos
|
||||
.map(
|
||||
(pair) =>
|
||||
encodeURIComponent(pair.name) + "=" + encodeURIComponent(pair.value)
|
||||
)
|
||||
.join("&");
|
||||
|
||||
document.getElementById("btnstripe").style.display = "none";
|
||||
document.getElementById("mensajePago").innerHTML = `
|
||||
<p>Espere un momento. Estamos procesando su pago.</p>
|
||||
<div class='spinner-border text-warning' role='status'><span class='sr-only'></span></div>
|
||||
`;
|
||||
|
||||
fetch("<?php echo $ruta?>/stripe/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 = `
|
||||
<p class='text-success'>✅ Pago realizado con éxito. ID Transacción: ${response.idTransaction}</p>
|
||||
`;
|
||||
} else {
|
||||
document.getElementById("mensajePago").innerHTML = `
|
||||
<p class='text-danger'>❌ Hubo un error: ${response.error}</p>
|
||||
`;
|
||||
document.getElementById("btnstripe").style.display = "inline-block";
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
document.getElementById("mensajePago").innerHTML = `
|
||||
<p class='text-danger'>❌ Error de conexión o del servidor. Intente nuevamente.</p>
|
||||
`;
|
||||
document.getElementById("btnstripe").style.display = "inline-block";
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error al obtener usuarios:", error);
|
||||
});
|
||||
});
|
||||
|
||||
function abrirModal() {
|
||||
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);
|
||||
}
|
||||
|
||||
function cerrarModal() {
|
||||
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);
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
</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: 25.5%;" 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="js/scriptPasarela.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="toast" class="toast"></div>
|
||||
<?php include "footer.php"; ?>
|
||||
Reference in New Issue
Block a user