281 lines
9.7 KiB
PHP
281 lines
9.7 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>Paiement {{$status ? 'réussi' : 'échoué'}} - {{__('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">
|
|
<div class="desk-body">
|
|
<div class="desk-content">
|
|
@if($status)
|
|
<div class="desk-animation">
|
|
<img alt="failed_icon" height="85" width="85"
|
|
src="{{asset('assets/images/success.png')}}">
|
|
</div>
|
|
<p class="text-center my-4">Votre paiement a réussi</p>
|
|
@else
|
|
<div class="desk-animation">
|
|
<img alt="failed_icon" height="85" width="85"
|
|
src="{{asset('assets/images/failed.png')}}">
|
|
</div>
|
|
<p class="text-center my-4">Votre paiement a échoué</p>
|
|
@endif
|
|
|
|
<div class="">
|
|
{{-- <p class="p-2 text-center">--}}
|
|
{{-- Contacter <a href="https://checkout.cinetpay.com/payment/reclamation">--}}
|
|
{{-- le support--}}
|
|
{{-- </a>--}}
|
|
{{-- </p>--}}
|
|
</div>
|
|
</div>
|
|
<div class="desk-action p-3">
|
|
<div class="row">
|
|
<div class="col-md-12 pb-2 text-center">
|
|
<a href="{{route('yoomee.v2.merchantRedirect',['transaction_id' => $transaction_id])}}"
|
|
class="btn btn-clear btn-block" id="closeCinetPaySeamlessModal">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
|
|
stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"
|
|
class="css-i6dzq1">
|
|
<polyline points="15 18 9 12 15 6"></polyline>
|
|
</svg>
|
|
Retourner sur le site
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@include('footer')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 src="{{asset('assets/app.js')}}"></script>
|
|
</body>
|
|
</html>
|