303 lines
10 KiB
HTML
303 lines
10 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Оплата через СБП</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||
<meta name="theme-color" content="#2563eb">
|
||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html, body { height: 100%; }
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
background: #1e40af;
|
||
}
|
||
|
||
.page {
|
||
min-height: 100dvh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
background: linear-gradient(135deg, #1e40af 0%, #2563eb 40%, #0ea5e9 100%);
|
||
}
|
||
@media (max-width: 480px) {
|
||
.page { align-items: flex-end; padding: 0; }
|
||
}
|
||
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 24px;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
box-shadow: 0 24px 60px rgba(0,0,0,.18);
|
||
overflow: hidden;
|
||
}
|
||
@media (max-width: 480px) {
|
||
.card { border-radius: 24px 24px 0 0; max-width: 100%; box-shadow: 0 -8px 40px rgba(0,0,0,.15); }
|
||
}
|
||
|
||
.card__header {
|
||
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
|
||
padding: 32px 28px 28px;
|
||
text-align: center;
|
||
}
|
||
@media (max-width: 480px) { .card__header { padding: 28px 24px 24px; } }
|
||
|
||
.card__title { color: #fff; font-size: 22px; font-weight: 700; margin: 14px 0 4px; letter-spacing: -.3px; }
|
||
.card__subtitle { color: rgba(255,255,255,.7); font-size: 13px; }
|
||
|
||
.card__body { padding: 28px 28px 20px; }
|
||
@media (max-width: 480px) { .card__body { padding: 24px 20px 16px; } }
|
||
|
||
.card__footer { padding: 0 28px 24px; display: flex; justify-content: center; }
|
||
@media (max-width: 480px) { .card__footer { padding: 0 20px 32px; } }
|
||
|
||
.sbp-logo {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: rgba(255,255,255,.15); backdrop-filter: blur(8px);
|
||
border-radius: 16px; padding: 12px 20px;
|
||
border: 1px solid rgba(255,255,255,.25);
|
||
}
|
||
.sbp-logo img { height: 40px; display: block; }
|
||
@media (max-width: 480px) { .sbp-logo img { height: 34px; } }
|
||
|
||
.field { margin-bottom: 16px; }
|
||
.field__label {
|
||
display: block; font-size: 13px; font-weight: 600; color: #64748b;
|
||
margin-bottom: 8px; text-transform: uppercase; letter-spacing: .6px;
|
||
}
|
||
.field__error { display: block; margin-top: 6px; font-size: 13px; color: #ef4444; font-weight: 500; }
|
||
.field__error:empty { display: none; }
|
||
|
||
.input-wrap {
|
||
display: flex; align-items: center;
|
||
border: 2px solid #e2e8f0; border-radius: 14px;
|
||
background: #f8fafc;
|
||
transition: border-color .2s, box-shadow .2s, background .2s;
|
||
}
|
||
.input-wrap:focus-within {
|
||
border-color: #2563eb;
|
||
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
|
||
background: #fff;
|
||
}
|
||
.input-wrap--error { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.1); }
|
||
.input-wrap__prefix { padding: 0 4px 0 18px; font-size: 26px; font-weight: 700; color: #2563eb; user-select: none; line-height: 1; }
|
||
.input-wrap__input {
|
||
flex: 1; border: none; background: transparent;
|
||
padding: 16px 16px 16px 8px; font-size: 32px; font-weight: 700;
|
||
color: #0f172a; outline: none; min-width: 0; font-family: inherit;
|
||
appearance: textfield; -moz-appearance: textfield;
|
||
}
|
||
.input-wrap__input::placeholder { color: #cbd5e1; }
|
||
.input-wrap__input::-webkit-outer-spin-button,
|
||
.input-wrap__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||
@media (max-width: 480px) { .input-wrap__input { font-size: 28px; padding: 14px 14px 14px 6px; } }
|
||
|
||
.currency-badge {
|
||
display: flex; align-items: center; gap: 10px;
|
||
background: #f1f5f9; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
|
||
}
|
||
.currency-badge__flag { font-size: 22px; line-height: 1; }
|
||
.currency-badge__code { font-size: 15px; font-weight: 700; color: #0f172a; }
|
||
.currency-badge__name { font-size: 13px; color: #64748b; margin-left: auto; }
|
||
|
||
.pay-btn {
|
||
width: 100%; display: flex; align-items: center; justify-content: center;
|
||
gap: 10px; padding: 17px 24px;
|
||
background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
|
||
color: #fff; border: none; border-radius: 14px;
|
||
font-size: 17px; font-weight: 700; letter-spacing: .2px;
|
||
cursor: pointer; font-family: inherit;
|
||
transition: opacity .15s, transform .1s, box-shadow .15s;
|
||
box-shadow: 0 6px 20px rgba(37,99,235,.38);
|
||
}
|
||
.pay-btn:hover { opacity: .92; box-shadow: 0 8px 28px rgba(37,99,235,.45); }
|
||
.pay-btn:active { transform: scale(.98); opacity: .88; }
|
||
.pay-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
|
||
.pay-btn__icon { display: flex; align-items: center; }
|
||
@media (max-width: 480px) { .pay-btn { padding: 16px 24px; font-size: 16px; } }
|
||
|
||
.secure-badge {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: 12px; color: #94a3b8; font-weight: 500;
|
||
}
|
||
|
||
.note-input {
|
||
width: 100%; border: 2px solid #e2e8f0; border-radius: 14px;
|
||
background: #f8fafc; padding: 14px 16px;
|
||
font-size: 15px; font-weight: 500; color: #0f172a;
|
||
font-family: inherit; resize: vertical; outline: none;
|
||
transition: border-color .2s, box-shadow .2s, background .2s;
|
||
line-height: 1.5;
|
||
}
|
||
.note-input::placeholder { color: #cbd5e1; font-weight: 400; }
|
||
.note-input:focus {
|
||
border-color: #2563eb;
|
||
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
|
||
background: #fff;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page">
|
||
<div class="card">
|
||
|
||
<div class="card__header">
|
||
<div class="sbp-logo">
|
||
<img src="sbp.svg" alt="СБП" />
|
||
</div>
|
||
<h1 class="card__title">Оплата через СБП</h1>
|
||
<p class="card__subtitle">Система быстрых платежей</p>
|
||
</div>
|
||
|
||
<div class="card__body">
|
||
|
||
<div class="field">
|
||
<label class="field__label" for="amount">Сумма платежа</label>
|
||
<div class="input-wrap" id="inputWrap">
|
||
<span class="input-wrap__prefix">₽</span>
|
||
<input
|
||
id="amount"
|
||
type="number"
|
||
class="input-wrap__input"
|
||
min="1"
|
||
step="1"
|
||
inputmode="numeric"
|
||
placeholder="0"
|
||
autofocus
|
||
value="50"
|
||
/>
|
||
</div>
|
||
<span class="field__error" id="error"></span>
|
||
</div>
|
||
|
||
<div class="currency-badge">
|
||
<span class="currency-badge__flag">🇷🇺</span>
|
||
<span class="currency-badge__code">RUB</span>
|
||
<span class="currency-badge__name">Российский рубль</span>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="field__label" for="note">Примечание</label>
|
||
<textarea
|
||
id="note"
|
||
class="note-input"
|
||
placeholder="Причина платежа..."
|
||
rows="3"
|
||
maxlength="500"
|
||
></textarea>
|
||
</div>
|
||
|
||
<button class="pay-btn" id="payBtn" onclick="goToPayment()">
|
||
<span class="pay-btn__icon">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
|
||
<line x1="1" y1="10" x2="23" y2="10"/>
|
||
</svg>
|
||
</span>
|
||
<span id="btnText">Перейти к оплате</span>
|
||
</button>
|
||
|
||
</div>
|
||
|
||
<div class="card__footer">
|
||
<span class="secure-badge">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
Защищённое соединение
|
||
</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const API_URL = 'https://qr.vitanova.network:567/qr';
|
||
|
||
const amountInput = document.getElementById('amount');
|
||
const noteInput = document.getElementById('note');
|
||
const errorEl = document.getElementById('error');
|
||
const payBtn = document.getElementById('payBtn');
|
||
const btnText = document.getElementById('btnText');
|
||
const inputWrap = document.getElementById('inputWrap');
|
||
|
||
amountInput.addEventListener('input', function () {
|
||
if (Number(this.value) > 0) {
|
||
errorEl.textContent = '';
|
||
inputWrap.classList.remove('input-wrap--error');
|
||
}
|
||
});
|
||
|
||
function getPaymentId() {
|
||
return new URLSearchParams(window.location.search).get('id');
|
||
}
|
||
|
||
function setLoading(loading) {
|
||
payBtn.disabled = loading;
|
||
btnText.textContent = loading
|
||
? 'Подождите...'
|
||
: 'Перейти к оплате';
|
||
}
|
||
|
||
function showError(msg) {
|
||
errorEl.textContent = msg;
|
||
inputWrap.classList.add('input-wrap--error');
|
||
}
|
||
|
||
async function goToPayment() {
|
||
const amount = Number(amountInput.value);
|
||
|
||
if (!amount || amount <= 0) {
|
||
showError('Введите корректную сумму');
|
||
return;
|
||
}
|
||
|
||
const id = getPaymentId();
|
||
if (!id) {
|
||
showError('Не указан идентификатор платежа (параметр id)');
|
||
return;
|
||
}
|
||
|
||
errorEl.textContent = '';
|
||
inputWrap.classList.remove('input-wrap--error');
|
||
setLoading(true);
|
||
|
||
try {
|
||
const response = await fetch(API_URL, {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json"
|
||
},
|
||
body: JSON.stringify({
|
||
qrtype: 'QRDynamic',
|
||
amount: amount,
|
||
currency: 'RUB',
|
||
partnerqrID: id,
|
||
qrDescription: noteInput.value.trim()
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.nspkurl) {
|
||
window.location.href = data.nspkurl;
|
||
} else {
|
||
showError("nspkurl не найден в ответе сервера");
|
||
setLoading(false);
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error(error);
|
||
showError("Ошибка запроса");
|
||
setLoading(false);
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|