Готовый блок
для Т-банка
Блок рассрочки или кредита от Т-банка (бывш. Тинькофф банк)

Для сайтов на PHP и Tilda и др.
Если вы оказались здесь, то перед вами стоит проблема:
у Т-Банка 1 кнопка и в неё можно поставить только 1 промокод, связанный с 1 периодом рассрочки.
Но как же быть с остальными? На каждый ставить кнопку?, И что если товар\услуга не одна?.

Ваша - Задача - Сделать так, что бы была 1 кнопка,
но в ней все промокоды и варианты периодов сразу

Универсальное решение - Сделать отдельный блок для рассрочки
Как выглдядит блок:

Выберите программу и период оплаты

Выберите пакет
Выберите длительность рассрочки
₽ в месяц*

Нажимая на кнопку, даю свое согласие на обработку персональных данных, принимаю условия политики конфиденциальности

Никаких переплат

стоимость билета остается фиксированной и просто «разбивается» на 3, 4, 6, 10, 12 равных выплат

Не нужно ничего платить прямо сейчас

первая выплата только через месяц

При оплате в рассрочку ваш билет придёт на почту в течение 1-3 суток после подписания договора

*ВНИМАНИЕ! Оплата в рассрочку действует только для граждан РФ

Что бы поставить этот блок на сайт, в Tilda нужно:
Краткая инструкция по установке
  • На странице редактора Tilda,
    Добавьте новый блок:
    • T123 - HTML блок
    Так же проверьте галочку в настройках сайта, в разделе ещё:
    • Подключить jQuery на страницах сайта
    1
  • Внутрь блока добавьте код:
    1. Основной код блока
    2. Стили и скрипт
    2
  • Измените параметры:
    Выдают в Т-банке:
    1. showcase Id
    2. showcase Id
    3. Промокоды (напр.: "installment_0_0_12")
    Свои параметры:
    1. Названия услуг\пакетов которые вы будете видеть в кабинете Т-банка
    2. Названия которое будет видно в выборе пакета\цен
    3. Цены
    4. Поставить ссылки на документы
    3
  • По желанию:
    • Может адаптировать цвета и стили под свой сайт
    • Добавить больше промокодов или убрать не нужные вам варианты.
    • Добавить сколько вы хотите пакетов с ценами
    • Адаптировать текст блока справа под вашу ситуацию
    4
  • Всё готово
    • Протестируйте самостоятельно
    • Если всё работает и заказ появляется у вас в кабинете - Вы молодец
    Нюансы:
    • Учтите что промокоды время от времени могут обновляться со стороны Т-банка
    • Поменять основной текст на кнопке на свой - не выйдет, только подпись
    • Форма Т-банка - открывается только в новом окне браузера
    • Тестировать можете не на боевых параметрах
    5
  • Не хватает функционала
    или не справились?
    Напишите нам в Telegram, мы окажем необходимые услуги и сделаем возможные доработки
    6
  1. Основной код блока
  • Можно оставить только 1 пакет и скрыть выбор пакетов.
  • Мы так же используем повышения цен, прописанных с датами в блоке пакетов.
  • Работает на Tilda без проблем
<!-- Блок с пакетами - Названия и цены -->

<div style="display: none;" class="price_item for_rass_pack" data-tinkof_title="Названия покупки в кабинете Т-банка">
				<div class="price_item-wrap">
					<div class="price_item-content">
						<div class="price-title"><u class="for_rass_title">Названия пакета в блоке рассрочки</u></div>
					</div>
					<div class="price_price-block">
              <div class="price_price"><strong class="for_rass_price">12000</strong> <span class="price_rub">₽</span></div>
					</div>
				</div>
		</div>
		
		<div style="display: none;" class="price_item for_rass_pack" data-tinkof_title="Названия покупки в кабинете Т-банка">
		<div class="price-title"><u class="for_rass_title">Названия пакета 2</u></div>		
		<div class="price_price"><strong class="for_rass_price">12222</strong> <span class="price_rub">₽</span></div>
		</div>
		
		<div style="display: none;" class="price_item for_rass_pack" data-tinkof_title="Названия покупки в кабинете Т-банка">
		<div class="price-title"><u class="for_rass_title">Названия пакета 3</u></div>		
		<div class="price_price"><strong class="for_rass_price">12333</strong> <span class="price_rub">₽</span></div>
		</div>

<!-- Конец блока - Блок с пакетами - Названия и цены -->

    <div id="rass_container" class="container">

          <div class="rass_block_box wow fadeInUp">
            <div class="rass_block">
              <p>Выберите программу и период оплаты</p>
              <form action="https://loans.tinkoff.ru/api/partners/v1/lightweight/create" method="post" class="rass_form">
                <div class="form_inline_line">
                  <div class="form_inline_item">
                      <div>
                    <div class="partner_inp_title">Выберите пакет</div>
                    <div class="inp-partner">
                       <select class="rass_select" data-start="<?php if ($pack):?><?php echo $pack;?><?php else:?>0<?php endif;?>" name="itemName_0"></select>
                    </div>
                    </div>
                    <div class="partner_inp_title">Выберите длительность рассрочки</div>
                    <div class="inp-partner">
                        <select class="rass_select" data-start="<?php if ($period):?><?php echo $period;?><?php else:?>5<?php endif;?>" name="promoCode">
<option data-key="1" data-parts="3"  value="installment_0_0_3"  >3 месяца</option>
<option data-key="2" data-parts="4"  value="installment_0_0_4"  >4 месяца</option>
<option data-key="3" data-parts="6"  value="installment_0_0_6"  >6 месяцев</option>
<option data-key="4" data-parts="10" value="installment_0_0_10">10 месяцев</option>
<option data-key="5" data-parts="12" value="installment_0_0_12">12 месяцев</option>
                        </select>
                    </div>
                  </div>

                  <div class="form_inline_item">
                    <h6 class="per_month"><span></span> ₽ в месяц*</h6>
                    <tinkoff-create-button class="tinkoff_button" size="M" subtext="рассрочка без %" shopId="" showcaseId="" payment-data=""></tinkoff-create-button>
                  </div>
                  
                </div>
                <input type="hidden" name="shopId" value="123123123123">
                <input type="hidden" name="showcaseId" value="123321321321">
                <input type="hidden" name="sum" value="">
                <input type="hidden" name="itemQuantity_0" value="1">
                <input type="hidden" name="itemPrice_0" value="">
         <p class="after_text">
             Нажимая на кнопку, даю свое согласие на обработку <a target="_blank" href="/">персональных данных</a>, принимаю условия <a target="_blank" href="/">политики конфиденциальности</a>
             </p>
              </form>
            </div>
            <div class="rass_block_text">
              <div class="rass_text_item">
                <h6>Никаких переплат</h6>
                <p>стоимость билета остается фиксированной и просто «разбивается» на 3, 4, 6, 10, 12 равных выплат</p>
              </div>
              <div class="rass_text_item">
                <h6>Не нужно ничего платить прямо сейчас</h6>
                <p>первая выплата только через месяц</p>
              </div>
              <div class="rass_text_item">
                <p>При оплате в рассрочку ваш билет придёт на почту в
                  течение 1-3 суток после подписания договора</p>
                <p>*ВНИМАНИЕ! Оплата в рассрочку действует только для граждан РФ</p>
              </div>
            </div>
          </div>
        </div> 
        
        
2. Стили + Скрипт внешний
Не забудьте - Подключить jQuery на страницах сайта - раздел "ещё" в настройках сайта
<style>
    .for_rass_title {text-decoration: none;}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.rass_block {text-align: center; width: 560px; margin: 20px auto; padding: 30px 20px 0; border: 5px solid #006dba; box-sizing: border-box; margin-right: 80px;}

.rass_block h6 {font-weight: bold; margin: 16px 0 22px;}

.rass_block>h4 {line-height: 1.3; padding: 10px 0; font-size: 28px;}

.rass_block .rass_text_item {padding: 0 0 20px; margin: 0 0 20px;}

.rass_block select {font-family: 'PF DinDisplay Pro'; border: 2px solid #006dba;}

.rass_block .form_inline_item>h6 {font-size: 18px; padding: 0 0 10px; font-weight: bold;}

.rass_block .form_inline_item>h6 span {font-size: 36px;}

.rass_block>p {margin: 0; padding: 6px 0 0 0; font-size: 18px; line-height: 1.5;}

.after_text {font-size: 13px; margin-bottom: 0; padding-bottom: 0;}

.after_text.offerta {width: 85%; font-size: 15px; line-height: 1.4; margin: 1.5em auto 0; margin-bottom: 0; padding: 0 15px 0; font-weight: 500;}

.rass_block_box {display: flex; align-items: center; justify-content: space-between; color: #000; padding-bottom: 50px; margin-top: 2px;}

.rass_block_text {flex: 1; text-align: left;}

.rass_text_item {padding: 16px 0; border-bottom: 2px solid #006dba;}

.rass_block_text h6 {font-size: 20px; margin: 0 0 12px;}

.rass_block_text p {margin: 0; padding: 0; font-size: 16px; line-height: 1.5;}

form.rass_form {padding: 10px 0 40px;}

.partner_inp_title {font-size: 16px; margin-top: 12px; font-weight: bold; padding: 16px 0 8px; margin: 0;}

.inp-partner {margin-top: 5px;}

.rass_block select {height: 44px; width: 100%; max-width: 320px; padding: 0 10px; box-sizing: border-box; font-size: 18px; text-align: center;}

@media (max-width: 1269px) {
  .rass_block_text {width: 40%; padding-left: 20px;}
}

@media (max-width: 1023px) {
  .rass_block_box {flex-direction: column;}
  .rass_block_text {width: 100%; padding-left: 0px;}
  .rass_block {width: 100%; margin-right: 0;}

}

.rass_block .after_text {padding: 20px 0 0 0; color: #000; line-height: 1.5;}

.rass_block .after_text a {color: #000; text-decoration: underline;}

.rass_block .after_text a:hover {text-decoration: none;}

</style>


<script>
jQuery(function(n){n(".rass_form").is(".nethouse")||n.getScript("https://forma.tinkoff.ru/static/onlineScript.js").done(function(t,e){console.log("скрипт тинькофф загружен")});var i=0,e=n(".rass_form").data("metrikaid"),r=n('.rass_form input[name="shopId"]').val(),c=n('.rass_form input[name="showcaseId"]').val();function t(){var t=n('.rass_form select[name="itemName_0"] option:selected').data("price"),e=n('.rass_form select[name="itemName_0"] option:selected').text(),a=n('.rass_form select[name="promoCode"] option:selected').val(),o=n(".for_rass_title:contains("+e+")").closest(".for_rass_pack").data("tinkof_title"),s=(t/n('.rass_form select[name="promoCode"] option:selected').data("parts")).toFixed(2);o=""!=o?o:e,n(".per_month span, #rassfrom_in").text(s),n('.rass_form input[name="sum"], .rass_form input[name="itemPrice_0"]').val(t),n("tinkoff-create-button").attr({shopId:r,showcaseId:c,"payment-data":"orderNumber="+Date.now()+"&items.0.name="+o+"&items.0.price="+t+"&items.0.quantity=1&promoCode="+a+"&sum="+t})}n('.for_rass_pack:not(".disabled")').each(function(t){var e=t+1,a=n(this).find(".for_rass_title").text(),o=n(this).data("tinkof_title"),s=(s=n(this).find(".for_rass_price").text()).replace(/\s+/g,"");(0==i||s<i)&&(i=s),0==t?n('select[name="itemName_0"]').append('<option data-price="'+s+'" data-key="'+e+'" value="'+o+'" selected>'+a+"</option>"):n('select[name="itemName_0"]').append('<option data-price="'+s+'" data-key="'+e+'" value="'+o+'">'+a+"</option>")}),n(".rass_form button").click(function(){var t=n('select[name="itemName_0"] option:selected').data("key"),e=n('select[name="promoCode"] option:selected').data("key"),t=window.location.protocol+"//"+window.location.host+window.location.pathname+"?pack="+t+"&period="+e;window.history.pushState({path:t},"",t)}),n(".rass_select").each(function(t){var e=n(this),a=e.data("start");0==a&&(a=(0==t?e.find("option:first"):e.find("option:last")).data("key")),e.find("option").prop("selected",!1),e.find('option[data-key="'+a+'"]').prop("selected",!0),e.find('option[data-key="'+a+'"]').val()}),n(".rass_select").change(function(){t()}),t(),n(".rass_form").submit(function(t){return t.preventDefault(),e&&ym(e,"reachGoal","INSTALLMENTS"),!1})});
</script>
Будем рады помочь решении
ваших задач
webking
Не хватает функционала
или не справились?

Напишите нам, мы окажем необходимые услуги
и сделаем возможные доработки.