Developer
<?php $__env->startSection('breadcrumb'); ?>
<?php echo $__env->make('user.components.breadcrumb',[
'breadcrumbs' => [
[
'name' => __("Dashboard"),
'url' => setRoute("user.dashboard"),
]
],
'active' => __($page_title)
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('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"><?php echo e(__("Default Card")); ?></h6>
<a href="<?php echo e(setRoute('user.card.index')); ?>" class="view-btn"><?php echo e(__("View All")); ?> <i class="las la-arrow-right"></i></a>
</div>
<div class="virtualCard-slider">
<div class="swiper-wrapper ">
<?php 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) ?? '';
?>
<div class="swiper-slide card<?php echo e(@$card_payments->id); ?>">
<a href="#0" class="virtualCard-item mx-auto bg_img"
data-background="<?php echo e(asset('public/frontend')); ?>/images/element/card.webp">
<div class="logo-wrapper">
<div class="brand-logo">
<img src="<?php echo e(get_logo($basic_settings)); ?>" alt="logo">
</div>
<div class="card-logo">
<img src="<?php echo e(get_fav($basic_settings)); ?>" alt="logo">
</div>
</div>
<div class="card-number-wrapper" data-full-number="<?php echo e(@$card_number); ?>"
onclick="toggleCardNumber()">
<span>********<?php echo e(substr($card_number, -4)); ?></span>
</div>
<div class="bottom-wrapper">
<div class="holder-name">
<span class="label"><?php echo e(__("Card Holder Name")); ?></span>
<h4 class="name"><?php echo e(@$name); ?></h4>
</div>
<div class="date-wrapper">
<span class="label"><?php echo e(__("Valid Till")); ?></span>
<h4 class="date"><?php echo e(@$expiry_date); ?></h4>
</div>
</div>
</a>
</div>
<?php else: ?>
<div class="alert alert-primary no-card">
<p><?php echo e(__("No Active Card Available!")); ?></p>
</div>
<?php endif; ?>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="recent-transaction-wrapper">
<div class="header-area">
<h6 class="label"><?php echo e(__("Latest Transactions")); ?></h6>
</div>
<ul class="recent-transaction-list card-details" id="card<?php echo e(@$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><?php echo e(__("Wallet Balance")); ?></p>
<h4 class="title"><?php echo e(get_amount(@$user_wallet->balance,@$user_wallet->currency->code)); ?></h4>
</div>
<div class="country-flag">
<img src="<?php echo e(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><?php echo e(__("Total Transactions")); ?></p>
<h4 class="title"><?php echo e(@$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><?php echo e(__("Save Cards")); ?></p>
<h4 class="title"><?php echo e(@$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"><?php echo e(__("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"><?php echo e(__("Latest Transactions")); ?></h4>
</div>
<?php echo $__env->make('user.components.transaction.index',[
'data' => $transactions
], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</div>
</div>
</div>
</div>
</div>
<?php $__env->stopSection(); ?>
<?php $__env->startPush('script'); ?>
<script src="<?php echo e(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 = <?php echo json_encode($card_payments, 15, 512) ?>[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 = `<?php echo e(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 = <?php echo json_encode($add_money, 15, 512) ?>;
var transferMoneyCount = <?php echo json_encode($transfer_money, 15, 512) ?>;
var cardPaymentCount = <?php echo json_encode($card_payment, 15, 512) ?>;
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: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('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: "<?php echo e(__('Add Money')); ?>",
data: [{ x: new Date().getTime(), y: addMoneyCount }]
},
{
name: "<?php echo e(__('Transfer Money')); ?>",
data: [{ x: new Date().getTime(), y: transferMoneyCount }]
},
{
name: "<?php echo e(__('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>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/kueuepay/public_html/resources/views/user/dashboard.blade.php ENDPATH**/ ?>
Developer
Initiates a new payment transaction.
| Parameter | Type | Details |
|---|---|---|
| amount | decimal | Your Amount , Must be rounded at 2 precision. |
| currency | string | Currency Code, Must be in Upper Case (Alpha-3 code) |
| success_url | string | Enter your return or success URL |
| cancel_url | string (optional) | Enter your cancel or failed URL |
Request Example (guzzle)
<?php
require_once('vendor/autoload.php');
$client = new \GuzzleHttp\Client();
$response = $client->request('POST', $base_url.'create-order', [
'headers' => [
'Authorization' => 'Bearer '. $authorizationToken,
'accept' => 'application/json',
'content-type' => 'application/json',
],
'form_params' => [
'amount' => '$amount',
'currency' => 'currency',
'success_url' => 'success_url',
'cancel_url' => 'cancel_url',
],
]);
echo $response->getBody();
**Response: SUCCESS (200 OK)**
{
"message": {
"success": [
"Order created successfully."
]
},
"data": {
"redirect_url":"https://example.com/login/OISADFDFSDFSF",
"order_details":{
"amount" : "10",
"fixed_charge" : 2,
"percent_charge" : 1,
"total_charge" : 3,
"total_payable" : 13,
"currency" : "USD",
"expiry_time": "2024-04-25T06:48:35.984285Z",
"success_url": "http://127.0.0.1/nfcpay/user/transaction/success",
"cancel_url": "http://127.0.0.1/nfcpay/user/transaction/cancel"
}
},
"type": "success"
}
**Response: ERROR (400 FAILED)**
{
"message": {
"error": [
"Invalid token."
]
},
"data": null,
"type": "error"
}