307 lines
10 KiB
PHP
307 lines
10 KiB
PHP
<!DOCTYPE html>
|
|
|
|
<html lang="fr" data-kantu="1">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Vérification du paiement - {{__('providers.'.$method)}}</title>
|
|
<meta name="theme-color" content="#000000">
|
|
<meta name="csrf-token" content="">
|
|
<link rel="icon" href="{{asset('assets/images/favicon.ico')}}">
|
|
<meta name="msapplication-TileColor" content="#ffffff">
|
|
<meta name="theme-color" content="#ffffff">
|
|
<link rel="stylesheet" href="{{asset('assets/app.css')}}">
|
|
|
|
<style>
|
|
.option-content1::after {
|
|
left: 42%;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
#page {
|
|
display: none;
|
|
}
|
|
|
|
#loading {
|
|
display: block;
|
|
position: absolute;
|
|
z-index: 100;
|
|
background-position: center;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%)
|
|
}
|
|
|
|
@keyframes ldio-5owbnf6l9j7 {
|
|
0% {
|
|
transform: translate(12px, 80px) scale(0);
|
|
}
|
|
25% {
|
|
transform: translate(12px, 80px) scale(0);
|
|
}
|
|
50% {
|
|
transform: translate(12px, 80px) scale(1);
|
|
}
|
|
75% {
|
|
transform: translate(80px, 80px) scale(1);
|
|
}
|
|
100% {
|
|
transform: translate(148px, 80px) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes ldio-5owbnf6l9j7-r {
|
|
0% {
|
|
transform: translate(148px, 80px) scale(1):
|
|
}
|
|
100% {
|
|
transform: translate(148px, 80px) scale(0);
|
|
}
|
|
}
|
|
|
|
@keyframes ldio-5owbnf6l9j7-c {
|
|
0% {
|
|
background: var(--loader-color1)
|
|
}
|
|
25% {
|
|
background: var(--loader-color2)
|
|
}
|
|
50% {
|
|
background: var(--loader-color1)
|
|
}
|
|
75% {
|
|
background: var(--loader-color2)
|
|
}
|
|
100% {
|
|
background: var(--loader-color1)
|
|
}
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div {
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
transform: translate(80px, 80px) scale(1);
|
|
background: var(--loader-color1);
|
|
animation: ldio-5owbnf6l9j7 1.2048192771084336s infinite cubic-bezier(0, 0.5, 0.5, 1);
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div:nth-child(1) {
|
|
background: var(--loader-color2);
|
|
transform: translate(148px, 80px) scale(1);
|
|
animation: ldio-5owbnf6l9j7-r 0.3012048192771084s infinite cubic-bezier(0, 0.5, 0.5, 1), ldio-5owbnf6l9j7-c 1.2048192771084336s infinite step-start;
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div:nth-child(2) {
|
|
animation-delay: -0.3012048192771084s;
|
|
background: var(--loader-color1);
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div:nth-child(3) {
|
|
animation-delay: -0.6024096385542168s;
|
|
background: var(--loader-color2);
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div:nth-child(4) {
|
|
animation-delay: -0.9036144578313252s;
|
|
background: var(--loader-color1);
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div:nth-child(5) {
|
|
animation-delay: -1.2048192771084336s;
|
|
background: var(--loader-color2);
|
|
}
|
|
|
|
.loadingio-spinner-ellipsis-99po1h19hjs {
|
|
width: 200px;
|
|
height: 200px;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
background: none;
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform: translateZ(0) scale(1);
|
|
backface-visibility: hidden;
|
|
transform-origin: 0 0; /* see note above */
|
|
}
|
|
|
|
.ldio-5owbnf6l9j7 div {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
|
|
.toggle-content {
|
|
display: none;
|
|
height: 0;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
|
|
}
|
|
|
|
.toggle-content.is-visible {
|
|
display: block;
|
|
height: auto;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="body">
|
|
<div id="loading">
|
|
<div class="loadingio-spinner-ellipsis-99po1h19hjs">
|
|
<div class="ldio-5owbnf6l9j7">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="page" class="container">
|
|
<div class="row h-100 justify-content-center">
|
|
<div class="col-md-8 col-lg-6 my-auto">
|
|
<div class="desk bg-white shadow-sm">
|
|
<div class="desk-head">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="">
|
|
<div class="media align-items-center">
|
|
<div class="media-head">
|
|
<img src="{{$receiver_logo}}" class="rounded media-body mr-2 marchand-logo" alt="{{$receiver}}">
|
|
</div>
|
|
<div class="media-body">
|
|
<p class="marchand-name p-0 m-0">{{$receiver}}</p>
|
|
<h4 class="due-amount p-0 m-0">{{$amount}}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr class="ml-2 mr-2">
|
|
<form method="POST" action="{{route('yoomee.v2.verify')}}">
|
|
<input type="hidden" name="_token" value="{{ app('request')->session()->get('_token') }}">
|
|
<input type="hidden" name="transaction_id" value="{{ $transaction_id }}">
|
|
<input type="hidden" name="verify_btn" value="1">
|
|
<div class="desk-body">
|
|
<div class="desk-content">
|
|
<p class="text-center">Vérification du paiement</p>
|
|
<div class="desk-info">
|
|
<p class="p-2 text-center">
|
|
Veuillez confirmer le paiement en saisissant votre code PIN sur votre telephone.
|
|
</p>
|
|
</div>
|
|
<p id="time">02:01</p>
|
|
</div>
|
|
<div class="desk-action p-3 requestNewCode">
|
|
<button type="submit"
|
|
class="btn btn-next btn-block">
|
|
Vérifier votre paiement <span id="timer"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
@include('footer')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="{{asset('assets/sweetalert2/sweetalert2.all.min.js')}}"></script>
|
|
<script src="{{asset('assets/app.js')}}"></script>
|
|
<script>
|
|
document.addEventListener('readystatechange', function (event) {
|
|
if (event.target.readyState === 'complete') {
|
|
ready();
|
|
}
|
|
});
|
|
|
|
function ready() {
|
|
setTimeout(function () {
|
|
fadeIn(document.getElementById('page'))
|
|
}, 217)
|
|
fadeOut(document.getElementById('loading'));
|
|
}
|
|
|
|
// ** FADE OUT FUNCTION **
|
|
function fadeOut(el) {
|
|
el.style.opacity = 1;
|
|
(function fade() {
|
|
if ((el.style.opacity -= .1) < 0) {
|
|
el.style.display = "none";
|
|
} else {
|
|
requestAnimationFrame(fade);
|
|
}
|
|
})();
|
|
}
|
|
|
|
// ** FADE IN FUNCTION **
|
|
function fadeIn(el, display) {
|
|
el.style.opacity = 0;
|
|
el.style.display = display || "block";
|
|
(function fade() {
|
|
var val = parseFloat(el.style.opacity);
|
|
if (!((val += .1) > 1)) {
|
|
el.style.opacity = val;
|
|
requestAnimationFrame(fade);
|
|
}
|
|
})();
|
|
}
|
|
|
|
function empty(item) {
|
|
return (item === undefined || item === null || item === false || item === '');
|
|
}
|
|
</script>
|
|
<script>
|
|
(
|
|
window.onload = function () {
|
|
var $countdownDuration = parseInt('121');
|
|
var display = document.querySelector('#time');
|
|
var message = '<a href="" class="btn btn-next btn-block">Vérifier votre paiement <span id="timer"></span></a>';
|
|
startTimer($countdownDuration, display, '.requestNewCode', message, true);
|
|
var myHeaders = new Headers();
|
|
var url = "{{route('yoomee.v2.verify')}}";
|
|
var raw = JSON.stringify({
|
|
"transaction_id": "{{$transaction_id}}"
|
|
});
|
|
|
|
var requestOptions = {
|
|
body: raw,
|
|
headers: myHeaders,
|
|
method: "POST",
|
|
redirect: "follow"
|
|
};
|
|
|
|
setInterval(function () {
|
|
try {
|
|
myHeaders.append("Content-Type", "application/json");
|
|
fetch(url, requestOptions)
|
|
.then(function (result) {
|
|
return result.json();
|
|
})
|
|
.then(function (response) {
|
|
if (response.refresh) {
|
|
location.reload();
|
|
}
|
|
})
|
|
.catch(function (caughtError) {
|
|
console.log({caughtError})
|
|
});
|
|
} catch (e) {
|
|
console.log({e});
|
|
}
|
|
}, 3000);
|
|
}
|
|
)();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|