We're proud to design great products for life
We create beautiful and magnetic projects. We develop services to help people run their businesses and improve their management systems.

Как сделать popUp c формой от Тинькофф банка для Tilda?

Добавляем форму банка в PopUp окно Tilda для блока BF503

Скрипты и стили добавляем в блок ДРУГОЕ►T123
Нажимая на кнопку "Оплатить" Вы соглашаетесь с Политикой крнфиденциальности

<style>.tinkoffPayRow{display:block;margin:1%;width:160px;}</style>
<script src="https://securepay.tinkoff.ru/html/payForm/js/tinkoff.js"></script>





<form name="TinkoffPayForm" onsubmit="pay(this); return false;">
	<input class="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest">
	<input class="tinkoffPayRow" type="hidden" name="frame" value="false">
	<input class="tinkoffPayRow" type="hidden" name="language" value="ru">
    <input class="tinkoffPayRow polya t-input" type="text" placeholder="Сумма заказа*" name="amount" required>
    <input class="tinkoffPayRow polya t-input" type="hidden" placeholder="Номер заказа" name="order">
    <input class="tinkoffPayRow polya t-input" type="hidden" placeholder="Описание заказа" name="description">
    <input class="tinkoffPayRow polya t-input" type="hidden" placeholder="ФИО плательщика" name="name">
    <input class="tinkoffPayRow polya t-input js-tilda-rule" type="hidden" name="email" class="t-input js-tilda-rule " value="" placeholder="E-mail" data-tilda-req="1" data-tilda-rule="email"  required>
    <input class="tinkoffPayRow polya t-input js-tilda-rule js-tilda-mask" type="text" placeholder="+7 ( ___ ) ________" name="phone" data-tilda-rule="phone" data-tilda-mask="+7 (999) 999-99-99" required>
    <input class="tinkoffPayRow knopka t-btn t-submit" type="submit" value="Оплатить">
   
    <div class="politika">Нажимая на кнопку "Оплатить" Вы соглашаетесь с <a href="#" style="">Политикой крнфиденциальности</a></div>
</form>


<style>
    .kassa {
    display: block;
    float: initial;
    margin:auto;
}
   .tinkoffPayRow {
    display: block;
    margin: 5px;
    padding: 0px;
    width: 100%;
}
.knopka {
    background: #fbe900;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: 0px 0px 3px 3px #e2e2e2;
}

.knopka:hover {
    background: #fff793;
}

.polya {
    border-radius: 5px;
    border: 1px solid #d8d8d8;
    padding-left: 15px;
}
.politika {
    font-size: 10px;
    color: #969696;
}


    
</style>



<script>
    
    $(document).ready(function(){

   $("#rec44627818 .t-col").addClass("kassa"); 
   $(".t390__descr").empty();
   $("#rec44627818").appendTo(".t390__descr");
    
    });  
</script>
Made on
Tilda