79 lines
2.7 KiB
HTML
79 lines
2.7 KiB
HTML
|
<div class="page">
|
||
|
|
<div class="card">
|
||
|
|
|
||
|
|
<div class="card__header">
|
||
|
|
<div class="sbp-logo">
|
||
|
|
<img src="https://sbp.nspk.ru/storage/settings/common/logo/0645d335-8b62-43a1-9a33-0d4c9d1dc0e0.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" [class.input-wrap--error]="error()">
|
||
|
|
<span class="input-wrap__prefix">₽</span>
|
||
|
|
<input
|
||
|
|
id="amount"
|
||
|
|
type="number"
|
||
|
|
class="input-wrap__input"
|
||
|
|
[ngModel]="amount()"
|
||
|
|
(ngModelChange)="onAmountChange($event)"
|
||
|
|
min="1"
|
||
|
|
step="1"
|
||
|
|
inputmode="numeric"
|
||
|
|
placeholder="0"
|
||
|
|
autofocus
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
@if (error()) {
|
||
|
|
<span class="field__error">{{ 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"
|
||
|
|
[ngModel]="note()"
|
||
|
|
(ngModelChange)="onNoteChange($event)"
|
||
|
|
placeholder="Причина платежа..."
|
||
|
|
rows="3"
|
||
|
|
maxlength="500"
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="pay-btn" type="button" (click)="pay()" [disabled]="loading()">
|
||
|
|
<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>
|
||
|
|
{{ loading() ? 'Подождите...' : 'Перейти к оплате' }}
|
||
|
|
</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>
|