add yoo-kassa payment(test setup)
This commit is contained in:
smanylov
@@ -0,0 +1,43 @@
|
||||
'use server'
|
||||
|
||||
import { YooCheckout, ICreatePayment } from '@a2seven/yoo-checkout';
|
||||
import { getSessionData } from '@/app/actions/session';
|
||||
|
||||
const checkout = new YooCheckout({ shopId: '1276731', secretKey: 'test_0Yns_0NHV5GJf6ypJ5HC4NSfnLO8SJkw-1PwrVWsDl4' });
|
||||
|
||||
const idempotenceKey = '02347fc4-a1f0-49db-807e-f0d67c2ed5a5';
|
||||
|
||||
export async function yooKasaCreatePayment(amount: number, tariff: string) {
|
||||
console.log(amount);
|
||||
console.log(tariff);
|
||||
/* return true; */
|
||||
|
||||
const userEmail = await getSessionData('email');
|
||||
|
||||
const createPayload: ICreatePayment = {
|
||||
amount: {
|
||||
value: amount.toLocaleString(),
|
||||
currency: 'RUB'
|
||||
},
|
||||
payment_method_data: {
|
||||
type: 'bank_card'
|
||||
},
|
||||
confirmation: {
|
||||
type: 'redirect',
|
||||
return_url: 'test'
|
||||
},
|
||||
metadata: {
|
||||
userId: userEmail,
|
||||
tariff: tariff
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const payment = await checkout.createPayment(createPayload, Date.now().toLocaleString());
|
||||
console.log(payment);
|
||||
return payment?.confirmation.confirmation_url;
|
||||
/* return payment; */
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
@@ -3942,4 +3942,111 @@
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-window-confirm-payment {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
max-width: 480px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
&-title {
|
||||
color: #1e293b;
|
||||
margin-bottom: 12px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&-tariff {
|
||||
color: #1e293b;
|
||||
margin-bottom: 8px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: #64748b;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&-price {
|
||||
background: #f8fafc;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
div {
|
||||
&:first-child {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
color: #64748b;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 12px 18px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.btn-confirm {
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-cancel {
|
||||
background: transparent;
|
||||
border: 2px solid #6366f1;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
&.btn-confirm:disabled,
|
||||
.btn-cancel:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-loading {
|
||||
position: relative;
|
||||
/* Можно добавить анимацию загрузки */
|
||||
}
|
||||
|
||||
.btn-loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid transparent;
|
||||
border-top-color: #ffffff;
|
||||
border-radius: 50%;
|
||||
animation: button-loading-spinner 1s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes button-loading-spinner {
|
||||
from {
|
||||
transform: translateY(-50%) rotate(0turn);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(-50%) rotate(1turn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,8 +4,12 @@ import { fetchTariffs } from '@/app/actions/action';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { convertBytes } from '@/app/lib/convertBytes';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { yooKasaCreatePayment } from '@/app/actions/yooKassa';
|
||||
import { useState, ReactNode } from 'react';
|
||||
import ModalWindow from '@/app/components/ModalWindow';
|
||||
|
||||
export default function PaymentTabTariffs() {
|
||||
const t = useTranslations('Global');
|
||||
const {
|
||||
data: userData,
|
||||
isLoading,
|
||||
@@ -18,48 +22,128 @@ export default function PaymentTabTariffs() {
|
||||
}
|
||||
});
|
||||
|
||||
const [openWindow, setOpenWindow] = useState<boolean>(false);
|
||||
const [selectedTariff, setSelectedTariff] = useState<{
|
||||
value: number;
|
||||
tariff: string;
|
||||
tokens: number;
|
||||
} | null>(null);
|
||||
const [isProcessing, setIsProcessing] = useState<boolean>(false);
|
||||
|
||||
const t = useTranslations('Global');
|
||||
async function createPayment(value: number, tariff: string) {
|
||||
if (isProcessing) return;
|
||||
|
||||
return (
|
||||
<div className="tab-content">
|
||||
<div className="billing-toggle" style={{ display: 'none' }}>
|
||||
<div>
|
||||
<button className="billing-btn active">💳 Помесячно</button>
|
||||
<button className="billing-btn">
|
||||
🔥 Годовая
|
||||
<span>ВЫГОДНО</span>
|
||||
setIsProcessing(true);
|
||||
|
||||
try {
|
||||
const response = await yooKasaCreatePayment(value, tariff);
|
||||
console.log(response);
|
||||
if (response) {
|
||||
window.open(response, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Payment error:', error);
|
||||
} finally {
|
||||
setIsProcessing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function openPaymentWindow(value: number, tariff: string, tokens: number) {
|
||||
setSelectedTariff({ value, tariff, tokens });
|
||||
setIsProcessing(false);
|
||||
setOpenWindow(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setOpenWindow(false);
|
||||
setSelectedTariff(null);
|
||||
setIsProcessing(false);
|
||||
}
|
||||
|
||||
function PaymentConfirmationModal() {
|
||||
if (!selectedTariff) return null;
|
||||
|
||||
const handleConfirm = () => {
|
||||
createPayment(selectedTariff.value, selectedTariff.tariff);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
closeModal();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="modal-window-confirm-payment">
|
||||
<h3 className="modal-window-confirm-payment-title">
|
||||
Подтверждение оплаты
|
||||
</h3>
|
||||
<h4 className="modal-window-confirm-payment-tariff">
|
||||
Подписка: {selectedTariff.tariff}
|
||||
</h4>
|
||||
<div className="modal-window-confirm-payment-description">
|
||||
Месячная подписка будет автоматически продлеваться
|
||||
<br />
|
||||
<strong>Включено {selectedTariff.tokens} токенов!</strong>
|
||||
</div>
|
||||
|
||||
<div className="modal-window-confirm-payment-price">
|
||||
<div>{selectedTariff.value}₽</div>
|
||||
<div>в месяц</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
className="btn-primary btn-cancel"
|
||||
onClick={handleCancel}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
{t('no')}
|
||||
</button>
|
||||
<button
|
||||
className={`btn-primary btn-confirm ${isProcessing ? 'btn-loading' : ''}`}
|
||||
onClick={handleConfirm}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
{isProcessing ? 'Обработка...' : t('yes')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="subscription-grid">
|
||||
);
|
||||
}
|
||||
|
||||
{userData?.map(((item: {
|
||||
id: number,
|
||||
name: string,
|
||||
price: number,
|
||||
tokens: number,
|
||||
maxFilesCount: number,
|
||||
diskSize: number
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="plan-card animate-card"
|
||||
key={item.id}
|
||||
>
|
||||
return (
|
||||
<>
|
||||
<ModalWindow state={openWindow} callBack={setOpenWindow}>
|
||||
<PaymentConfirmationModal />
|
||||
</ModalWindow>
|
||||
|
||||
<div className="tab-content">
|
||||
<div className="billing-toggle" style={{ display: 'none' }}>
|
||||
<div>
|
||||
<button className="billing-btn active">💳 Помесячно</button>
|
||||
<button className="billing-btn">
|
||||
🔥 Годовая
|
||||
<span>ВЫГОДНО</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="subscription-grid">
|
||||
{userData?.map((item: {
|
||||
id: number;
|
||||
name: string;
|
||||
price: number;
|
||||
tokens: number;
|
||||
maxFilesCount: number;
|
||||
diskSize: number;
|
||||
}) => (
|
||||
<div className="plan-card animate-card" key={item.id}>
|
||||
<div className="plan-header">
|
||||
<div className="plan-icon">🚀</div>
|
||||
<h3 className="plan-name">
|
||||
{
|
||||
t.has(item.name) ? t(item.name) : item.name
|
||||
}
|
||||
{t.has(item.name) ? t(item.name) : item.name}
|
||||
</h3>
|
||||
<div className="plan-price">
|
||||
{item.price}
|
||||
</div>
|
||||
<div className="plan-price">{item.price}</div>
|
||||
<div className="plan-period">в месяц</div>
|
||||
<div className="plan-tokens">
|
||||
{item.tokens} токенов включено</div>
|
||||
<div className="plan-tokens">{item.tokens} токенов включено</div>
|
||||
</div>
|
||||
<ul className="plan-features">
|
||||
<li className="plan-feature">
|
||||
@@ -83,10 +167,18 @@ export default function PaymentTabTariffs() {
|
||||
API доступ
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => openPaymentWindow(item.price, item.name, item.tokens)}
|
||||
>
|
||||
Выбрать план
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -8,9 +8,11 @@ export default function SecurePayments() {
|
||||
return (
|
||||
<div className="secure-payments-wrapper">
|
||||
<h3>
|
||||
🔒 Безопасные платежи
|
||||
Безопасные платежи
|
||||
</h3>
|
||||
<div>
|
||||
<div
|
||||
className='flex gap-4'
|
||||
>
|
||||
<button
|
||||
className='btn btn-primary'
|
||||
onClick={async () => {
|
||||
|
||||
Reference in New Issue
Block a user