60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<!-- 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()">×</span>
|
|
</div>
|
|
|
|
<!-- Cuerpo del modal -->
|
|
<div class="modal-body">
|
|
<!-- Nombre -->
|
|
<div class="mb-3">
|
|
<label for="nameStripe">Nombre</label>
|
|
<input type="text" id="nameUser" class="form-control" required>
|
|
</div>
|
|
|
|
<!-- Correo -->
|
|
<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>
|
|
|
|
<!-- Monto y moneda -->
|
|
<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>
|
|
|
|
<!-- Descripción -->
|
|
<div class="mb-3">
|
|
<label for="description">Descripción</label>
|
|
<input type="text" id="description" class="form-control" required>
|
|
</div>
|
|
|
|
<!-- Tarjeta (Stripe) -->
|
|
<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>
|