Developer
@extends('user.layouts.master')
@section('breadcrumb')
@include('user.components.breadcrumb',[
'breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
],
'active' => __($page_title)
])
@endsection
@section('content')
<div class="body-wrapper">
<div class="dashboard-wallet">
<div class="row flex-row-reverse">
<div class="col-lg-4 col-md-6">
<div class="dashboard-virtualcard-item">
<div class="dash-virtualCard-wrapper">
<div class="header-area">
<h6 class="label">{{ __("Default Card") }}</h6>
<a href="{{ setRoute('user.card.index') }}" class="view-btn">{{ __("View All") }} <i class="las la-arrow-right"></i></a>
</div>
<div class="virtualCard-slider">
<div class="swiper-wrapper ">
@if(!empty($card_payments))
@php
$name = decrypt($card_payments->name) ?? '';
$card_number = decrypt($card_payments->card_number) ?? '';
$card_cvc = decrypt($card_payments->card_cvc) ?? '';
$expiry_date = decrypt($card_payments->expiry_date) ?? '';
@endphp
<div class="swiper-slide card{{ @$card_payments->id }}">
<a href="#0" class="virtualCard-item mx-auto bg_img"
data-background="{{ asset('public/frontend') }}/images/element/card.webp">
<div class="logo-wrapper">
<div class="brand-logo">
<img src="{{ get_logo($basic_settings) }}" alt="logo">
</div>
<div class="card-logo">
<img src="{{ get_fav($basic_settings) }}" alt="logo">
</div>
</div>
<div class="card-number-wrapper" data-full-number="{{ @$card_number }}"
onclick="toggleCardNumber()">
<span>********{{ substr($card_number, -4) }}</span>
</div>
<div class="bottom-wrapper">
<div class="holder-name">
<span class="label">{{ __("Card Holder Name") }}</span>
<h4 class="name">{{ @$name }}</h4>
</div>
<div class="date-wrapper">
<span class="label">{{ __("Valid Till") }}</span>
<h4 class="date">{{ @$expiry_date }}</h4>
</div>
</div>
</a>
</div>
@else
<div class="alert alert-primary no-card">
<p>{{ __("No Active Card Available!") }}</p>
</div>
@endif
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="recent-transaction-wrapper">
<div class="header-area">
<h6 class="label">{{ __("Latest Transactions") }}</h6>
</div>
<ul class="recent-transaction-list card-details" id="card{{ @$card_payments->id }}-details">
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-md-6 mb-40">
<div class="dashboard-card-item mb-60">
<div class="row mb-20-none">
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p>{{ __("Wallet Balance") }}</p>
<h4 class="title">{{ get_amount(@$user_wallet->balance,@$user_wallet->currency->code) }}</h4>
</div>
<div class="country-flag">
<img src="{{ get_image(@$user_wallet->currency->flag,'currency-flag') }}" alt="flag">
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p>{{ __("Total Transactions") }}</p>
<h4 class="title">{{ @$total_transactions }}</h4>
</div>
<div class="icon">
<i class="las la-dollar-sign"></i>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-12 col-sm-6 mb-20">
<div class="wallet-item">
<div class="wallet-details">
<p>{{ __("Save Cards") }}</p>
<h4 class="title">{{ @$total_cards }}</h4>
</div>
<div class="icon">
<i class="las la-credit-card"></i>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-chart">
<div class="chart-wrapper">
<div class="dashboard-header-wrapper">
<h4 class="title">{{ __("Transaction Overview") }}</h4>
</div>
<div class="chart-container">
<div id="chart-area">
</div>
<div id="chart-bar">
</div>
</div>
</div>
</div>
<div class="dashboard-list-area mt-30">
<div class="dashboard-header-wrapper">
<h4 class="title">{{ __("Latest Transactions") }}</h4>
</div>
@include('user.components.transaction.index',[
'data' => $transactions
])
</div>
</div>
</div>
</div>
</div>
@endsection
@push('script')
<script src="{{ asset('public/frontend/js/apexcharts.js') }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Initialize Swiper
var swiper = new Swiper(".virtualCard-slider", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
speed: 1000,
breakpoints: {
1199: {
slidesPerView: 1,
},
991: {
slidesPerView: 1,
},
767: {
slidesPerView: 1,
},
575: {
slidesPerView: 1,
},
},
});
// Show the first card's details on page load
let initialCardId = !empty($card_payments) ? $card_payments[0]->id : null;
document.getElementById(`card${initialCardId}-details`).style.display = 'block';
// Handle slide change to show corresponding details
swiper.on('slideChange', function () {
var activeSlideIndex = swiper.realIndex; // Get active slide index
var cardId = @json($card_payments)[activeSlideIndex].id; // Get the card ID
// Hide all card details
document.querySelectorAll('.card-details').forEach(function (el) {
el.style.display = 'none';
});
// Show details of the active card
document.getElementById(`card${cardId}-details`).style.display = 'block';
// Fetch and update the transactions
fetchTransactions(cardId);
});
function fetchTransactions(cardId) {
const url = `{{ url('/user/card') }}/${cardId}/transactions`;
fetch(url)
.then(response => response.json())
.then(data => {
const transactionList = document.getElementById(`card${cardId}-details`);
transactionList.innerHTML = '';
data.forEach(transaction => {
const li = document.createElement('li');
li.innerHTML = `
<div class="icon-area">
<i class="fas fa-plus-circle"></i>
<div class="title-wrapper">
<h6 class="label">${transaction.type}</h6>
<span>${transaction.trx_id}</span>
</div>
</div>
<div class="content">
<h6 class="amount">${transaction.request_amount}</h6>
<span class="date">At ${new Date(transaction.created_at).toLocaleTimeString()}</span>
</div>`;
transactionList.appendChild(li);
});
})
.catch(error => console.error('Error fetching transactions:', error));
}
// Toggle card number display
let timer;
function toggleCardNumber() {
const cardNumberWrappers = document.getElementsByClassName('card-number-wrapper');
for (let cardNumberWrapper of cardNumberWrappers) {
const fullCardNumber = cardNumberWrapper.getAttribute('data-full-number');
const hiddenCardNumber = fullCardNumber.split(' ').map((num, index) => index < 3 ? '****' : num).join(' ');
if (cardNumberWrapper.innerHTML.includes('****')) {
cardNumberWrapper.innerHTML = fullCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
timer = setTimeout(() => {
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}, 5000);
} else {
clearTimeout(timer);
cardNumberWrapper.innerHTML = hiddenCardNumber.split(' ').map(num => `<span>${num}</span>`).join('');
}
}
}
});
</script>
<script>
var addMoneyCount = @json($add_money);
var transferMoneyCount = @json($transfer_money);
var cardPaymentCount = @json($card_payment);
function getFirstDayOfMonth() {
var today = new Date();
return new Date(today.getFullYear(), today.getMonth(), 1).getTime();
}
function generateDayWiseTimeSeries(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
var startOfMonth = getFirstDayOfMonth();
var data = generateDayWiseTimeSeries(startOfMonth, 30, { min: 30, max: 90 });
var options1 = {
chart: {
id: "chart2",
type: "area",
height: 230,
foreColor: "#ccc",
toolbar: {
autoSelected: "pan",
show: false
}
},
colors: ["#0070e0"],
stroke: {
width: 3
},
grid: {
borderColor: "#0070e0",
clipMarkers: false,
yaxis: {
lines: {
show: false
}
}
},
dataLabels: {
enabled: false
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.55,
opacityTo: 0
}
},
markers: {
size: 5,
colors: ["#000524"],
strokeColor: "#00BAEC",
strokeWidth: 3
},
series: [
{
name: "{{ __('Add Money') }}",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "{{ __('Transfer Money') }}",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "{{ __('Payments') }}",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
tooltip: {
theme: "dark"
},
xaxis: {
type: "datetime"
},
yaxis: {
min: 0,
tickAmount: 4
}
};
var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);
chart1.render();
var options2 = {
chart: {
id: "chart1",
height: 130,
type: "bar",
foreColor: "#ccc",
brush: {
target: "chart2",
enabled: true
},
selection: {
enabled: true,
fill: {
color: "#fff",
opacity: 0.4
},
xaxis: {
min: startOfMonth,
max: new Date().getTime()
}
}
},
colors: ["#0070e0"],
series: [
{
name: "{{ __('Add Money') }}",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "{{ __('Transfer Money') }}",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "{{ __('Payments') }}",
data: [{ x: new Date().getTime(), y: cardPaymentCount }]
}
],
stroke: {
width: 2
},
grid: {
borderColor: "#444"
},
markers: {
size: 0
},
xaxis: {
type: "datetime",
tooltip: {
enabled: false
}
},
yaxis: {
tickAmount: 2
}
};
var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);
chart2.render();
</script>
@endpush
Developer
Welcome to the Kueue Pay Payment Gateway Solutions Developer API Documentation. This comprehensive guide will empower you to seamlessly integrate our advanced payment gateway into your website, enhancing your customers’ payment experience and enabling efficient transaction processing. The Kueue Pay Developer API is designed for developers and entrepreneurs who seek simplicity, security, and reliability in their payment processing solutions.
The Kueue Pay Developer API allows you to seamlessly integrate Kueue Pay’s Payment Gateway Solutions into your website, enabling secure and efficient debit and credit card transactions. With our API, you can initiate payments, check payment statuses, and even process refunds, all while ensuring a smooth and streamlined payment experience for your customers.