File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/wompiapi/webcheckout.blade.php
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
:root {
--bs-primary-rgb: 46, 78, 140;
--bs-link-color-rgb: 46, 78, 140;
--bs-form-valid-color: #2e4e8c;
--bs-form-valid-border-color: #2e4e8c;
--bs-success-rgb: 46, 78, 140;
.form-check-input:checked {
background-color: #2e4e8c;
border-color: #2e4e8c;
}
.btn-primary {
--bs-btn-color: #fff;
--bs-btn-bg: #2e4e8c;
--bs-btn-border-color: #2e4e8c;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #2e4e8c;
--bs-btn-hover-border-color: #2e4e8c;
--bs-btn-focus-shadow-rgb: 49, 132, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #2e4e8c;
--bs-btn-active-border-color: #0a53be;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #2e4e8c;
--bs-btn-disabled-border-color: #2e4e8c;
}
}
::placeholder {
color: #2e4e8c !important;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<div id="stage-2" class="visually-hidden">
<div class="card mb-4 rounded-3 shadow-sm border-primary mt-3">
<div class="card-header py-3 text-bg-primary border-primary">
<h5 class="my-0 fw-normal">
Elige método de pago
</h5>
</div>
<div class="card-body">
<form id="personal-data" class="form-horizontal requires-validation was-validated">
<input type="hidden" name="reference" value="{{$reference}}">
<input type="hidden" id="payment-method" name="payment_method" value="">
<div class="form-floating mb-3">
<select id="payment_method" name="payment_method" class="payment-method form-select" required>
<option value="">Seleccione</option>
<option value="CARD">Tarjeta de Crédito</option>
</select>
<label for="payment_method">Medio de pago:</label>
</div>
<h4 class="card-title pricing-card-title"><span class="fw-light">Ingresa tus datos</span></h4>
<div class="form-floating mb-3">
<input id="full_name" name="full_name" type="text" data-minlength="5" required="required" class="form-control" value="{{$customer_fullname}}" placeholder>
<label for="full_name">Nombres y apellidos</label>
</div>
<div class="form-floating mb-3">
<input id="email" name="email" type="email" required="required" class="form-control" value="{{$customer_email}}" placeholder>
<label for="email">Correo electrónico</label>
</div>
<div class="form-floating mb-3">
<input id="phone_number" name="phone_number" type="text" pattern="\d{10,}" required="required" class="form-control" value="{{$customer_mobile}}" placeholder>
<label for="phone_number">Celular o número telefónico</label>
</div>
<div class="col-xs-offset-11 col-xs-1">
<button name="submit" type="submit" class="confirm-stage-2 btn btn-primary float-end">Continuar</button>
</div>
</form>
</div>
</div>
</div>
<div id="stage-3" class="visually-hidden">
<div class="card mb-4 rounded-3 shadow-sm border-primary mt-3">
<div class="card-header py-3 text-bg-primary border-primary">
<h5 class="my-0 fw-normal">
<button class="btn btn-lg btn-primary text-center back-button"><span><i class="bi bi-arrow-left"></i></span></button>
Paga con tu tarjeta
</h5>
</div>
<div class="card-body">
<form id="card-data" class="form-horizontal requires-validation was-validated">
<div>
<h6>Mis medios de pago</h6>
<div id="payment-sources-container" class="form-group">
<table class="table">
<tbody id="payment-sources"></tbody>
</table>
</div>
<button type="button" id="new-payment-source" class="btn btn-primary float-end mb-3">Agregar tarjeta</button>
</div>
<div class="clearfix"></div>
<div id="card-data-form" class="visually-hidden">
<div class="form-floating mb-3 mt-3">
<input id="card_number" name="card_number" type="text" pattern="\d{12,19}" class="form-control" placeholder>
<label for="card_number">Número de la tarjeta:</label>
</div>
Expira el:
<div class="row g-2 mb-3">
<div class="form-floating col-6">
<select id="exp_month" name="exp_month" class="form-select">
@for($i = 1; $i <= 12; $i++)
<option>{{str_pad($i,2,'0',STR_PAD_LEFT)}}</option>
@endfor
</select>
<label for="exp_month">Mes:</label>
</div>
<div class="form-floating col-6">
<select id="exp_year" name="exp_year" class="form-select">
@for($i = date('y'); $i <= date('y')+10; $i++)
<option>{{str_pad($i,2,'0',STR_PAD_LEFT)}}</option>
@endfor
</select>
<label for="exp_year">Año:</label>
</div>
</div>
<div class="form-floating mb-3">
<input id="cvc" name="cvc" type="text" pattern="[0-9]*" minlength="3" data-minlength="3" class="form-control" placeholder>
<label for="cvc">CVC (Código de seguridad):</label>
</div>
<div class="form-floating mb-3">
<input id="card_holder" name="card_holder" type="text" minlength="6" data-minlength="6" class="form-control" placeholder>
<label for="card_holder">Nombre en la tarjeta</label>
</div>
<div class="form-check mb-3">
<label class="form-check-label" for="store_payment_source">Acepto que se realicen cargos futuros con este medio de pago</label>
<input type="checkbox" class="form-check-input" id="store_payment_source" name="store_payment_source" value="true" checked>
</div>
Identificación del tarjetahabiente:
<div class="form-floating mb-3">
<select id="document_type" name="document_type" class="form-select">
<option value="">Seleccione</option>
<option>CC</option>
<option>NIT</option>
</select>
<label for="document_type">Tipo:</label>
</div>
<div class="form-floating mb-3">
<input id="document_number" name="document_number" type="text" pattern="[0-9]*" minlength="6" data-minlength="6" class="form-control" placeholder>
<label for="document_number">Número de documento</label>
</div>
</div>
<div class="form-floating mb-3 mt-3">
<input id="installments" name="installments" type="numeric" value="1" class="form-control" placeholder>
<label for="installments">Número de cuotas</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="accept_wompi_termcons" name="accept_wompi_termcons" value="{{ $presigned_acceptance->acceptance_token }}" data-error="Debe aceptar la politica de privacidad" required>
<label class="form-check-label" for="accept_wompi_termcons">
<a href="{{ $presigned_acceptance->permalink }}" target="_blank">Acepto haber leído los reglamentos y la política de privacidad.</a>
</label>
<div class="help-block with-errors"></div>
</div>
<div class="col-xs-offset-11 col-xs-1">
<button name="submit" type="submit" class="confirm-stage-3 btn btn-primary float-end">Suscribirme</button>
</div>
</form>
</div>
</div>
</div>
<div id="stage-4" class="visually-hidden">
<div class="card mb-4 rounded-3 shadow-sm border-primary mt-3">
<div class="card-header py-3 text-bg-primary border-primary">
<h5 class="my-0 fw-normal">
<button class="btn btn-lg btn-primary text-center back-button"><span><i class="bi bi-arrow-left"></i></span></button>
Paga con PSE
</h5>
</div>
<div class="card-body">
<form id="pse-data" class="form-horizontal">
<div class="form-floating mb-3">
<select id="select" name="select" class="form-select">
@foreach($pse_institutions as $pse_institution)
<option value="{{ $pse_institution->financial_institution_code }}" target="_blank">{{ $pse_institution->financial_institution_name }}</option>
@endforeach
</select>
<label for="select" class="control-label col-xs-4">Selecciona tu banco:</label>
</div>
<div class="form-floating mb-3">
<select id="select" name="select" class="form-select">
<option value="0" target="_blank">Natural</option>
<option value="1" target="_blank">Jurídica</option>
</select>
<label for="select" class="control-label col-xs-4">Tipo de persona:</label>
</div>
<div class="form-floating mb-3">
<select id="select" name="select" class="form-select">
<option value="CC" target="_blank">Cédula de ciudadanía</option>
<option value="NIT" target="_blank">NIT</option>
</select>
<label for="select" class="control-label col-xs-4">Tipo de documento:</label>
</div>
<div class="form-floating mb-3">
<input id="pse_document" name="pse_document" type="text" required="required" class="form-control" placeholder>
<label for="pse_document">Número de documento:</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="pse_accept_wompi_termcons" name="pse_accept_wompi_termcons" value="{{ $presigned_acceptance->acceptance_token }}" data-error="Debe aceptar la politica de privacidad" required>
<label class="form-check-label" for="accept_wompi_termcons">
<a href="{{ $presigned_acceptance->permalink }}" target="_blank">Acepto haber leído los reglamentos y la política de privacidad.</a>
</label>
<div class="help-block with-errors"></div>
</div>
<div class="col-xs-offset-11 col-xs-1">
<button name="submit" type="submit" class="confirm-stage-4 btn btn-primary float-end">Suscribirme</button>
</div>
</form>
</div>
</div>
</div>
<div id="stage-5" class="visually-hidden">
<div class="card mb-4 rounded-3 shadow-sm border-primary mt-3">
<div class="card-header py-3 text-bg-primary border-primary">
<h5 class="my-0 fw-normal">
Finalizando la transacción
</h5>
</div>
<div class="card-body">
<div class="d-flex justify-content-center mt-5 mb-5">
<div class="spinner-border text-primary" role="status">
<span class="sr-only"></span>
</div>
</div>
<div class="d-flex justify-content-center mt-5 mb-5">
<span id="info-container">Estamos procesando la transacción...</span>
</div>
<div class="col-xs-offset-11 col-xs-1">
<a id="back-store" class="btn btn-primary float-end disabled" role="button" href="{{$confirm_url}}">Finalizar</a>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/newsLibs/jquery.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="{{ asset('js/validator.min.js') }}"></script>
<script>
$(document).ready(function() {
let paymentMethodSelected = '';
let currentStage = 2;
let previousStage = 2;
let userPaymentSource = {};
$.ajax({
url: '/store/wompi-api/user-payment-sources',
method: "GET",
// headers: {
// "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
// },
dataType: "json",
data: {reference: '{{ $reference }}'},
success: function(response) {
if ($.isEmptyObject(response)) {
newCardValidationFields();
$('#payment-sources').append(
`<tr>
<td scope="row">
<div class="form-check">
No hay tarjetas registradas
</div>
</td>
</tr>`
);
return;
}
$.each(response, function(key, value) {
paymentSource = value.payment_source;
$('#payment-sources').append(
`<tr>
<td scope="row">
<div class="form-check">
<input class="form-check-input payment-source-radio" type="radio" name="payment_source" value="${paymentSource.id}" required>
<label class="form-check-label" for="payment-source">
****-****-****-${paymentSource.public_data.last_four}
</label>
</div>
</td>
</tr>`
);
});
}
});
const forms = document.querySelectorAll('.requires-validation');
Array.from(forms).forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
});
$(document).on('click','.payment-source-radio',function() {
paymentSourceValidationFields();
$('#card-data-form').addClass('visually-hidden');
});
$('.payment-method').click(function(e) {
e.preventDefault();
paymentMethodSelected = $(this).val();
$('#payment-method').val(paymentMethodSelected);
$('#stage-2').removeClass('visually-hidden');
currentStage = 2;
});
$('.back-button').click(function(e) {
e.preventDefault();
$('#stage-' + currentStage).addClass('visually-hidden');
$('#stage-' + previousStage).removeClass('visually-hidden');
currentStage = previousStage;
if (currentStage == 2) {
previousStage = 1;
} else {
previousStage = 2;
}
});
$('#personal-data').validator({disable:false}).on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault();
previousStage = 2;
$('#stage-2').addClass('visually-hidden');
if ('PSE' === paymentMethodSelected) {
$('#stage-4').removeClass('visually-hidden');
currentStage = 4;
} else {
$('#stage-3').removeClass('visually-hidden');
paymentSourceValidationFields();
$('#card-data-form').addClass('visually-hidden');
currentStage = 3;
}
}
});
$('#card-data').validator({disable:false}).on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault();
$('#stage-3').addClass('visually-hidden');
$('#stage-5').removeClass('visually-hidden');
doPayment();
}
});
$('#pse-data').validator().on('submit', function (e) {
if (e.isDefaultPrevented()) {
// handle the invalid form...
} else {
// everything looks good!
e.preventDefault();
$('#stage-4').addClass('visually-hidden');
$('#stage-5').removeClass('visually-hidden');
doPayment();
}
});
$('#new-payment-source').on('click', function(e) {
e.preventDefault();
newCardValidationFields();
$('input[name=payment_source]:checked').prop('checked',false);
$('#card-data-form').removeClass('visually-hidden');
});
let newCardValidationFields = function() {
$('.payment-source-radio').prop('required', false);
$('#card_number').prop('required', true);
$('#exp_month').prop('required', true);
$('#exp_year').prop('required', true);
$('#cvc').prop('required', true);
$('#card_holder').prop('required', true);
$('#document_type').prop('required', true);
$('#document_number').prop('required', true);
$('#accept_wompi_termcons').prop('required', true);
$('#card-data').validator('update');
}
let paymentSourceValidationFields = function() {
$('.payment-source-radio').prop('required', true);
$('#card_number').prop('required', false);
$('#exp_month').prop('required', false);
$('#exp_year').prop('required', false);
$('#cvc').prop('required', false);
$('#card_holder').prop('required', false);
$('#document_type').prop('required', false);
$('#accept_wompi_termcons').prop('required', true);
$('#card-data').validator('update');
}
let doPayment = function() {
$.ajax({
url: '/store/wompi-api/confirm',
method: "POST",
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
},
dataType: "json",
data: convertFormToJSON('#personal-data, #card-data'),
success: function(response) {
$('#back-store').removeClass('disabled');
setTimeout(function() {
window.location.href = '{!!$confirm_url!!}';
}, 1000);
},
error: function(xhr, status, error) {
$('#info-container').html(xhr.responseJSON.message);
setTimeout(function() {
$('#back-store').removeClass('disabled');
window.close();
}, 1000);
}
});
}
let convertFormToJSON = function(form) {
const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
$('#stage-2').removeClass('visually-hidden');
});
</script>
</body>
</html>