Калькулятор рассрочки за обучение для сайта школы

<section class="vbkro">
  <div class="vbkro-wrap">
    <div class="vbkro-head">
      <h2 class="vbkro-h2">Сколько это будет в месяц</h2>
      <p class="vbkro-lead">Двигайте срок — увидите платёж и переплату. Рядом вариант оплаты целиком, чтобы было с чем сравнить.</p>
    </div>

    <div class="vbkro-grid">
      <div class="vbkro-panel">
        <div class="vbkro-ctl">
          <div class="vbkro-ctl__top"><span>Первоначальный взнос</span><b id="vbkro-down">0 ₽</b></div>
          <input type="range" id="vbkro-downr" min="0" max="50" step="5" value="0" aria-label="Первоначальный взнос, процентов">
          <div class="vbkro-ticks"><i>0%</i><i>25%</i><i>50%</i></div>
        </div>

        <div class="vbkro-ctl">
          <span class="vbkro-ctl__lbl">Срок рассрочки</span>
          <div class="vbkro-terms" id="vbkro-terms" role="radiogroup" aria-label="Срок рассрочки"></div>
        </div>

        <div class="vbkro-compare">
          <span class="vbkro-compare__lbl">Или оплатить целиком</span>
          <b id="vbkro-full"></b>
          <span class="vbkro-compare__save" id="vbkro-save"></span>
        </div>
      </div>

      <aside class="vbkro-res">
        <span class="vbkro-res__lbl">Платёж в месяц</span>
        <strong class="vbkro-res__sum" id="vbkro-pay"></strong>
        <ul class="vbkro-rows">
          <li><span>Стоимость курса</span><b id="vbkro-price"></b></li>
          <li><span>Первый взнос</span><b id="vbkro-d2"></b></li>
          <li><span>Срок</span><b id="vbkro-term"></b></li>
          <li><span>Переплата</span><b id="vbkro-over"></b></li>
        </ul>
        <a class="vbkro-cta" href="#zapis">Оформить рассрочку</a>
        <p class="vbkro-note">Расчёт справочный. Точные условия определяет банк при одобрении заявки.</p>
      </aside>
    </div>
  </div>
</section>

<style>
.vbkro, .vbkro *, .vbkro *::before, .vbkro *::after { box-sizing: border-box; }
.vbkro {
  --acc: #4b56d2; --acc-dark: #3d47b5; --ink: #191b2e; --muted: #5f6280; --line: #e3e4ef; --soft: #f4f4fb;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--soft); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbkro-wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbkro-head { max-width: 42em; margin-bottom: clamp(22px, 3vw, 36px); }
.vbkro-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbkro-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

.vbkro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; align-items: start; }
.vbkro-panel { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 2.6vw, 30px); }
.vbkro-ctl { margin-bottom: 26px; }
.vbkro-ctl__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font-size: 15px; color: var(--muted); }
.vbkro-ctl__top b { font-family: var(--fh); font-size: 20px; color: var(--ink); }
.vbkro-ctl__lbl { display: block; font-size: 15px; color: var(--muted); margin-bottom: 12px; }
.vbkro input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: #dfe0ee; outline: none; }
.vbkro input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--acc); border: 4px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); cursor: pointer; }
.vbkro input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--acc); border: 3px solid #fff; cursor: pointer; }
.vbkro-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #9a9cb2; }
.vbkro-ticks i { font-style: normal; }

.vbkro-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.vbkro-terms button { border: 1.5px solid var(--line); margin: 0; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer;
  background: #fff !important; color: var(--ink) !important; border-radius: 12px; padding: 13px 8px; text-align: center; font-size: 15px; transition: .18s ease; }
.vbkro-terms button:hover { border-color: #c3c6df; }
.vbkro-terms button[aria-checked="true"] { border-color: var(--acc); background: #eef0fc !important; font-weight: 600; }

.vbkro-compare { border-top: 1px solid var(--line); padding-top: 20px; }
.vbkro-compare__lbl { display: block; font-size: 13px; color: var(--muted); }
.vbkro-compare b { display: block; font-family: var(--fh); font-size: 26px; font-weight: 700; margin: 4px 0 4px; }
.vbkro-compare__save { display: inline-block; font-size: 13px; font-weight: 600; color: #1f9254; background: #eaf7ef; border-radius: 999px; padding: 4px 12px; }

.vbkro-res { background: var(--ink); color: #fff; border-radius: 22px; padding: clamp(20px, 2.6vw, 30px); position: sticky; top: 20px; }
.vbkro-res__lbl { display: block; font-size: 13px; color: #9a9cb2; }
.vbkro-res__sum { display: block; font-family: var(--fh); font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1; font-weight: 700; margin: 6px 0 18px; }
.vbkro-rows { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 11px; }
.vbkro-rows li { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: #b7b9cc; }
.vbkro-rows b { color: #fff; font-weight: 600; white-space: nowrap; }
.vbkro-cta, .vbkro-cta:link, .vbkro-cta:visited, .vbkro-cta:active, .vbkro-cta:focus { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background: var(--acc); color: #fff !important; text-decoration: none !important; transition: background .2s ease; }
.vbkro-cta:hover { background: var(--acc-dark); color: #fff !important; }
.vbkro-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: #7e809a; }

@media (max-width: 860px) { .vbkro-grid { grid-template-columns: minmax(0, 1fr); } .vbkro-res { position: static; } }
@media (prefers-reduced-motion: reduce) { .vbkro * { transition: none !important; } }
</style>

<script>
(function () {
  var PRICE = 109000;        /* полная стоимость курса */
  var DISCOUNT = 12;         /* скидка за оплату целиком, % */
  var TERMS = [6, 12, 18, 24];   /* сроки рассрочки в месяцах */
  var RATE = 0;              /* годовая ставка, % — 0 для беспроцентной рассрочки */

  /* Несколько тарифов: замените PRICE на объект и раскомментируйте переключатель
     var PLANS = { 'Базовый': 79000, 'Стандарт': 109000, 'С наставником': 149000 }; */

  var roots = document.querySelectorAll('.vbkro');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var st = { down: 0, term: 12 };
    var $ = function (s) { return root.querySelector(s); };
    function fmt(n) { return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    var termsBox = $('#vbkro-terms');
    TERMS.forEach(function (m) {
      var b = document.createElement('button');
      b.type = 'button'; b.setAttribute('role', 'radio');
      b.setAttribute('aria-checked', m === st.term ? 'true' : 'false');
      b.textContent = m + ' мес';
      b.addEventListener('click', function () {
        st.term = m;
        termsBox.querySelectorAll('button').forEach(function (x) { x.setAttribute('aria-checked', 'false'); });
        b.setAttribute('aria-checked', 'true');
        render();
      });
      termsBox.appendChild(b);
    });

    $('#vbkro-downr').addEventListener('input', function () { st.down = +this.value; render(); });

    function render() {
      var down = PRICE * st.down / 100;
      var body = PRICE - down;
      var pay, total;
      if (RATE > 0) {
        var i = RATE / 100 / 12;
        var k = i * Math.pow(1 + i, st.term) / (Math.pow(1 + i, st.term) - 1);
        pay = body * k;
        total = pay * st.term + down;
      } else {
        pay = body / st.term;
        total = PRICE;
      }
      var full = PRICE * (1 - DISCOUNT / 100);

      $('#vbkro-down').textContent = fmt(down) + ' ₽';
      $('#vbkro-pay').textContent = fmt(pay) + ' ₽';
      $('#vbkro-price').textContent = fmt(PRICE) + ' ₽';
      $('#vbkro-d2').textContent = st.down ? fmt(down) + ' ₽ (' + st.down + '%)' : 'не нужен';
      $('#vbkro-term').textContent = st.term + ' мес';
      $('#vbkro-over').textContent = total > PRICE ? fmt(total - PRICE) + ' ₽' : 'без переплаты';
      $('#vbkro-full').textContent = fmt(full) + ' ₽';
      $('#vbkro-save').textContent = 'выгода ' + fmt(PRICE - full) + ' ₽';
    }
    render();
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.