Как подключить сервис оплаты в рассрочку и кредит к сайту на Tilda

1. Войдите на Tilda, выберите сайт, на который хотите поставить кнопку, и нажмите «Редактировать сайт».

   

2. Перейдите в «⚙️Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head» → «Редактировать код».

   

3. На экране отобразится поле для ввода кода. Скопируйте код из серой плашки ниже, нажмите на строку и вставьте его.

   <script src="https://forma.tinkoff.ru/static/onlineScriptTilda.js"></script>

4. Нажмите «Сохранить» → «Закрыть» → «Сохранить изменения» → «Опубликовать». Код сохранится в настройках сайта.

   

Готово! Сервис рассрочек Т‑Банка подключен к вашему сайту.

1. Из настроек вернитесь на экран со страницами сайта.

   

2. Выберите страницу, на которой хотите разместить кнопку, — вы попадете в режим редактирования страницы.

   

3. Нажмите «+» в любом месте сайта, где хотите разместить блок с кнопкой оплаты в рассрочку, — откроется библиотека блоков. Найдите «Нулевой блок», или Zero Block, и кликните на него — блок появится на странице.

   Если хотите разместить кнопку оплаты в рассрочку под карточкой товара, создайте карточку товара в «Нулевом блоке», а не с помощью готовых блоков. Как работать с Zero Block — инструкции от Tilda

4. Нажмите «Редактировать блок» → «+» в левом верхнем углу → Add HTML.

   

5. На экране отобразится строка для ввода кода. Переместите ее в область, куда планируете добавить кнопку для оформления рассрочки. Дважды нажмите на строку, чтобы отредактировать ее: удалите исходный код, скопируйте код ниже и вставьте его на место исходного.

   <tinkoff-create-button-tilda

       size="M"

       shopId="XXX"

       showcaseId="XXX"

       ui-data="productType=installment&view=newTab"

       payment-data="demoFlow=sms&items.0.name=Hasta&items.0.price=19626.15&items.0.quantity=1&promoCode=default&sum=19626.15"

       subtext=""

   ></tinkoff-create-button-tilda>

6. Вы встроили кнопку с нашими тестовыми параметрами, теперь отредактируйте их.

   size=”M”	Кнопка размера M — 56px. Чтобы изменить размер кнопки, замените M: на S, если нужна кнопка поменьше — 32 px; на L, если нужна кнопка побольше — 112 px
   shopId="XXX"	Идентификатор компании. Вместо XXX скопируйте и вставьте идентификатор вашей компании — shopId, его выдает менеджер при подключении сервиса рассрочек
   showcaseId="XXX"	Идентификатор магазина. Вместо XXX скопируйте и вставьте идентификатор вашего магазина — showcaseId, его выдает менеджер при подключении сервиса рассрочек
   ui-data="productType=installment&view=newTab"	Определяет основной текст кнопки и то, как будет открываться форма заявки по клику на кнопку. installment — на кнопке будет «Купить в рассрочку». Измените на credit, чтобы на кнопке было «Купить в кредит». newTab — форма заявки откроется у покупателя на новой вкладке. Измените на self, если хотите, чтобы форма заявки открывалась на той же вкладке
   payment-data="demoFlow=sms&items.0.name=Hasta&items.0.price=19626.15&items.0.quantity=1&promoCode=default&sum=19626.15"	Отвечает за включение и выключение деморежима и за то, как предзаполнена форма заявки. demoFlow=sms — деморежим включен. Это значит, что форма заявки работает в тестовом режиме: вы можете проверить, что все работает корректно, но реально оформить рассрочку или кредит не получится. Не забудьте отключить деморежим, когда откроете сайт для покупателей. Для этого просто удалите из кода кнопки demoFlow=sms&. items.0.name=Hasta — название товара. Замените Hasta на название вашего товара. 0 — порядковый номер товара. В нашем примере товар один. Если делаете кнопку для нескольких товаров, которые продаете комплектом, или хотите зашить в кнопку стоимость доставки, у вас будет несколько items в параметре payment-data, каждый со своим порядковым номером. items.0.price=19626.15 — цена товара. Замените 19626.15 на цену вашего товара. items.0.quantity=1 — количество товара в штуках. Если продаете товар партиями, замените 1 на ваше количество. promoCode=default — промокод, который вам выдал менеджер сервиса рассрочки и кредитования. В нем зашифрованы условия рассрочки или кредита. Поставьте вместо default промокод, соответствующий условиям, на которых вы хотите выдавать рассрочку или кредит на этот товар на вашем сайте. Можно вписать несколько промокодов, чтобы покупатель мог выбрать условия, — тогда вместо payment-data в коде должен быть параметр payment-data-select. Инструкция, как добавить несколько промокодов sum=19626.15 — общая сумма заказа. Поставьте вместо числа из нашего примера ваши данные. Если это кнопка для одного конкретного товара, общая сумма заказа будет совпадать с ценой товара.
   subtext=""	Дополнительный текст на кнопке, под основной надписью «Оформить рассрочку» или «Оформить кредит». Это необязательный параметр. В коде, который вы вставили на сайт, дополнительного текста на кнопке нет. Введите текст в кавычки, и он появится на кнопке.

   size=”M”

   Кнопка размера M — 56px. Чтобы изменить размер кнопки, замените M:

   • на S, если нужна кнопка поменьше — 32 px;
   • на L, если нужна кнопка побольше — 112 px

   shopId="XXX"

   Идентификатор компании. Вместо XXX скопируйте и вставьте идентификатор вашей компании — shopId, его выдает менеджер при подключении сервиса рассрочек

   showcaseId="XXX"

   Идентификатор магазина. Вместо XXX скопируйте и вставьте идентификатор вашего магазина — showcaseId, его выдает менеджер при подключении сервиса рассрочек

   ui-data="productType=

   installment&view=newTab"

   Определяет основной текст кнопки и то, как будет открываться форма заявки по клику на кнопку.

   installment — на кнопке будет «Купить в рассрочку». Измените на credit, чтобы на кнопке было «Купить в кредит».

   newTab — форма заявки откроется у покупателя на новой вкладке. Измените на self, если хотите, чтобы форма заявки открывалась на той же вкладке

   payment-data="demoFlow=

   sms&items.0.name=

   Hasta&items.0.price=

   19626.15&items.0.quantity=

   1&promoCode=

   default&sum=19626.15"

   Отвечает за включение и выключение деморежима и за то, как предзаполнена форма заявки.

   demoFlow=sms — деморежим включен. Это значит, что форма заявки работает в тестовом режиме: вы можете проверить, что все работает корректно, но реально оформить рассрочку или кредит не получится.

   Не забудьте отключить деморежим, когда откроете сайт для покупателей. Для этого просто удалите из кода кнопки demoFlow=sms&.

   items.0.name=Hasta — название товара. Замените Hasta на название вашего товара. 0 — порядковый номер товара. В нашем примере товар один. Если делаете кнопку для нескольких товаров, которые продаете комплектом, или хотите зашить в кнопку стоимость доставки, у вас будет несколько items в параметре payment-data, каждый со своим порядковым номером.

   items.0.price=19626.15 — цена товара. Замените 19626.15 на цену вашего товара.

   items.0.quantity=1 — количество товара в штуках. Если продаете товар партиями, замените 1 на ваше количество.

   promoCode=default — промокод, который вам выдал менеджер сервиса рассрочки и кредитования. В нем зашифрованы условия рассрочки или кредита. Поставьте вместо default промокод, соответствующий условиям, на которых вы хотите выдавать рассрочку или кредит на этот товар на вашем сайте. Можно вписать несколько промокодов, чтобы покупатель мог выбрать условия, — тогда вместо payment-data в коде должен быть параметр payment-data-select. Инструкция, как добавить несколько промокодов

   sum=19626.15 — общая сумма заказа. Поставьте вместо числа из нашего примера ваши данные. Если это кнопка для одного конкретного товара, общая сумма заказа будет совпадать с ценой товара.

   subtext=""

   Дополнительный текст на кнопке, под основной надписью «Оформить рассрочку» или «Оформить кредит». Это необязательный параметр. В коде, который вы вставили на сайт, дополнительного текста на кнопке нет. Введите текст в кавычки, и он появится на кнопке.
7. В правом верхнем углу экрана нажмите Close & Update → Save → Close → «Опубликовать».

Готово! Кнопка добавлена на сайт. Нажав на нее, покупатель сможет купить товар в рассрочку. Вот так кнопка выглядит на странице:

1. Войдите на Tilda, выберите сайт, на который хотите поставить кнопку, и нажмите «Редактировать сайт».

   

2. Перейдите в «⚙️Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head» → «Редактировать код».

   

3. На экране отобразится поле для ввода кода. Скопируйте код из серой плашки ниже, нажмите на строку и вставьте его.

   <script src="https://forma.tinkoff.ru/static/onlineScriptTildaCart‑1.0.0.js"></script>

4. Нажмите «Сохранить» → «Закрыть» → «Сохранить изменения» → «Опубликовать». Код сохранится в настройках сайта.

   

5. Настройте безналичную оплату. Перейдите в настройки сайта → «Платежные системы». Прокрутите страницу вниз и выберите «Безналичный расчет».
6. Откроется страница с настройкой оплаты. В поле «Наименование оплаты» введите текст, который будут видеть пользователи на кнопке. Например, «Купить в рассрочку».

   

7. Нажмите «Добавить» → «Сохранить изменения». Способ оплаты отобразится в разделе «Платежные системы» → «Подключенные платежные системы».

   

Готово! Сервис рассрочек Т‑Банка подключен к вашему сайту.

1. Из настроек вернитесь на экран со страницами сайта.

   

2. Выберите страницу, на которой размещен блок с корзиной, — вы попадете в режим редактирования страницы.

   Пройдите все шаги ниже на каждой странице, где есть блок с корзиной.

   

3. Нажмите «+» в любом месте сайта — откроется библиотека блоков. Найдите блок, который называется «HTML-код», и кликните на него — он появится на странице.

   

4. Скопируйте код со скриптом из серой плашки ниже, на блоке «HTML-код» нажмите кнопку «Контент» и вставьте скопированный код.

   <tinkoff-tilda-cart-integration

       size="M"

       shopId="XXX"

       showcaseId="XXX"

       ui-data="productType=installment&view=newTab"

       subtext=""

       payment-data="demoFlow=sms&promoCode=default"

   ></tinkoff-tilda-cart-integration>

5. Вы встроили кнопку с нашими тестовыми параметрами — теперь отредактируйте их.

   size=”M”	Кнопка размера M — 56px. Чтобы изменить размер кнопки, замените M: на S, если нужна кнопка поменьше — 32 px; на L, если нужна кнопка побольше — 112 px
   shopId="XXX"	Идентификатор компании. Вместо XXX скопируйте и вставьте идентификатор вашей компании — shopId, его выдает менеджер при подключении сервиса рассрочек
   showcaseId="XXX"	Идентификатор магазина. Вместо XXX скопируйте и вставьте идентификатор вашего магазина — showcaseId, его выдает менеджер при подключении сервиса рассрочек
   ui-data="productType=installment&view=newTab"	Определяет основной текст кнопки и то, как будет открываться форма заявки по клику на кнопку. installment — на кнопке будет «Купить в рассрочку». Измените на credit, чтобы на кнопке было «Купить в кредит». newTab — форма заявки откроется у покупателя в новой вкладке. Измените на self, если хотите, чтобы форма заявки открывалась на той же вкладке
   subtext=""	Дополнительный текст на кнопке, под основной надписью «Оформить рассрочку» или «Оформить кредит». Это необязательный параметр. В коде, который вы вставили на сайт, дополнительного текста на кнопке нет. Введите текст в кавычки, и он появится на кнопке
   payment-data="demoFlow=sms&promoCode=default	Отвечает за включение и выключение деморежима и за то, как предзаполнена форма заявки. demoFlow=sms — деморежим включен. Это значит, что форма заявки работает в тестовом режиме: вы можете проверить, что все работает корректно, но реально оформить рассрочку или кредит не получится. Не забудьте отключить деморежим, когда откроете сайт для покупателей, — для этого просто удалите из кода кнопки demoFlow=sms& promoCode=default — промокод, который вам выдал менеджер сервиса рассрочки и кредитования. В нем зашифрованы условия рассрочки или кредита. Поставьте вместо default промокод, соответствующий условиям, на которых вы хотите выдавать рассрочку или кредит на этот товар на вашем сайте. Можно вписать несколько промокодов, чтобы покупатель мог выбрать условия, — тогда вместо payment-data в коде должен быть параметр payment-data-select. Инструкция, как добавить несколько промокодов

   size=”M”

   Кнопка размера M — 56px. Чтобы изменить размер кнопки, замените M:

   • на S, если нужна кнопка поменьше — 32 px;
   • на L, если нужна кнопка побольше — 112 px

   shopId="XXX"

   Идентификатор компании. Вместо XXX скопируйте и вставьте идентификатор вашей компании — shopId, его выдает менеджер при подключении сервиса рассрочек

   showcaseId="XXX"

   Идентификатор магазина. Вместо XXX скопируйте и вставьте идентификатор вашего магазина — showcaseId, его выдает менеджер при подключении сервиса рассрочек

   ui-data="productType=

   installment&view=newTab"

   Определяет основной текст кнопки и то, как будет открываться форма заявки по клику на кнопку.

   installment — на кнопке будет «Купить в рассрочку». Измените на credit, чтобы на кнопке было «Купить в кредит».

   newTab — форма заявки откроется у покупателя в новой вкладке. Измените на self, если хотите, чтобы форма заявки открывалась на той же вкладке

   subtext=""

   Дополнительный текст на кнопке, под основной надписью «Оформить рассрочку» или «Оформить кредит». Это необязательный параметр. В коде, который вы вставили на сайт, дополнительного текста на кнопке нет. Введите текст в кавычки, и он появится на кнопке

   payment-data="

   demoFlow=sms

   &promoCode=default

   Отвечает за включение и выключение деморежима и за то, как предзаполнена форма заявки.

   demoFlow=sms — деморежим включен. Это значит, что форма заявки работает в тестовом режиме: вы можете проверить, что все работает корректно, но реально оформить рассрочку или кредит не получится.

   Не забудьте отключить деморежим, когда откроете сайт для покупателей, — для этого просто удалите из кода кнопки demoFlow=sms&

   promoCode=default — промокод, который вам выдал менеджер сервиса рассрочек. В нем зашифрованы условия рассрочки или кредита. Поставьте вместо default промокод, соответствующий условиям, на которых вы хотите выдавать рассрочку или кредит на этот товар на вашем сайте. Можно вписать несколько промокодов, чтобы покупатель мог выбрать условия, — тогда вместо payment-data в коде должен быть параметр payment-data-select. Инструкция, как добавить несколько промокодов
6. Нажмите «Сохранить и закрыть» → «Опубликовать».

Готово! Теперь кнопка есть на сайте, и ваши покупатели могут купить товары из корзины в рассрочку.

1. Перейдите в режим редактирования сайта, в разделе «Библиотека блоков» найдите Zero Block. Нажмите «Редактировать блок».

   

2. Нажмите на «+» в левом верхнем углу и выберите Add Form.

   

3. На экране появится шаблон для ввода электронной почты. Отредактируйте его — удалите кнопку Submit. Для этого откройте Settings в правом нижнем углу экрана → Button, в строке BTN Title выделите и удалите слово Submit.

   

4. В строках BTN Width и BTN Height удалите исходные значения и поставьте 0.

   

5. Удалите автоматически созданные поля. Для этого в подменю Inputs нажмите кнопку Input Fields.

   

6. На экране отобразится два блока настроек полей: Input 1 и Input 2. Нажмите Delete в шапке каждого блока.

   

7. Нажмите кнопку Add Input Field и в строке Type выберите Dropdown.

   

8. Заполните поля в форме:

   • Input Title — заголовок выпадающего списка, его покупатель увидит перед выбором срока рассрочки. Например, можно указать «Выберите срок».

   • Variants — варианты рассрочек, каждый должен начинаться с новой строки. Например, можно указать:

     • На 3 месяца.
     • На 6 месяцев.
     • На 9 месяцев.

   • Variable Name — имя поля внутри системы. Нужно для связки кнопки и списка, покупатели его не увидят. Если на странице будет несколько кнопок, укажите для каждой уникальное имя. Оно может быть любым, например tinkoff-promocode-select‑1, tinkoff-promocode-select‑2 и так далее.

   

9. Нажмите Close & Update в правом верхнем углу экрана.
10. Вы вернулись в режим редактирования страницы. Расположите созданный выпадающий список рядом с кнопкой оплаты в рассрочку. Кнопка оплаты в рассрочку в режиме редактирования страницы выглядит как черная плашка с кодом.

    

11. Отредактируйте блок с кнопкой, дважды нажав на него в режиме редактирования страницы. В параметре payment‑data удалите promoCode=default. Скопируйте и добавьте в код кнопки код ниже:

    promo-select-tilda="name=tinkoff-promocode-select‑1&items.0.text=На 3 месяца&items.0.value=installment_0_0_3_4&items.1.text=На 6 месяцев&items.1.value=installment_0_0_6_4&items.2.text=На 9 месяцев&items.2.value=installment_0_0_9_9,5"

12. Вы вставили код для выбора срока рассрочки на 3, 6 и 9 месяцев.

    При необходимости его можно отредактировать.

    name=tinkoff-promocode-select‑1

    Вместо tinkoff-promocode-select‑1 укажите значение поля Variable Name, которое вводили в п. 8 этой инструкции

    items.0.text=На 3 месяца&items.0.value=installment_0_0_3_4 items.1.text=На 6 месяцев&items.1.value=installment_0_0_6_4 items.2.text=На 9 месяцев&items.2.value=installment_0_0_9_9,5

    Варианты условий в выпадающем списке. В нашем случае их три. Цифры 0, 1, 2 — порядковые номера условий в списке, где 0 — первое условие. Впишите вместо «На 3 месяца», «На 6 месяцев» и «На 10 месяцев» текст для вариантов рассрочки или кредита, как их будет видеть покупатель. Замените installment_0_0_3_4, installment_0_0_6_5 и installment_0_0_10_10 на промокоды для рассрочек или кредитов с условиями, которые хотите предложить покупателю. Промокоды выдает менеджер в личном кабинете руководителя после подключения сервиса рассрочек

    name=tinkoff-promocode-select‑1

    Вместо tinkoff-promocode-select‑1 укажите значение поля Variable Name, которое вводили в п. 9 этой инструкции

    items.0.text=На 3 месяца&

    items.0.value=

    installment_0_0_3_4

    items.1.text=На 6 месяцев&

    items.1.value=

    installment_0_0_6_4

    items.2.text=На 9 месяцев&

    items.2.value=

    installment_0_0_9_9,5

    Варианты условий в выпадающем списке. В нашем случае их три. Цифры 0, 1, 2 — порядковые номера условий в списке, где 0 — первое условие.

    Впишите вместо «На 3 месяца», «На 6 месяцев» и «На 10 месяцев» текст для вариантов рассрочки или кредита, как их будет видеть покупатель.

    Замените installment_0_0_3_4, installment_0_0_6_5 и installment_0_0_10_10 на промокоды для рассрочек или кредитов с условиями, которые хотите предложить покупателю. Промокоды выдает менеджер в личном кабинете руководителя после подключения сервиса рассрочек
13. Нажмите Close & Update → Save → Close → «Опубликовать». Меню с выбором срока и кнопка оплаты на странице сайта будут выглядеть так:

    

1. Перейдите на экран со страницами сайта.
2. Выберите страницу, на которой у вас размещен блок с корзиной, — вы попадете в режим редактирования страницы.

   

3. Найдите блок «HTML‑код», который добавили раньше по инструкции.
4. В блоке «HTML‑код» нажмите «Контент» — вы попадете в редактор кода блока.
5. В параметре payment‑data удалите promoCode=default. В нашем примере получится:

   payment-data="demoFlow=sms"

6. Скопируйте код и добавьте его следующей строкой после строки payment‑data:

   promo-select-tilda="label=Выберите срок&items.0.text=На 3 месяца&items.0.value=installment_0_0_3_4&items.1.text=На 6 месяцев&items.1.value=installment_0_0_6_4&items.2.text=На 9 месяцев&items.2.value=installment_0_0_9_9,5"

7. Вы вставили код для выбора срока рассрочки на 3, 6 и 9 месяцев.

   При необходимости его можно отредактировать.

   label=Выберите срок

   Текст над списком. Напишите вместо «Выберите срок» свой текст

   items.0.text=На 3 месяца&items.0.value=installment_0_0_3_4 items.1.text=На 6 месяцев&items.1.value=installment_0_0_6_4 items.2.text=На 9 месяцев&items.2.value=installment_0_0_9_9,5

   Варианты условий в выпадающем списке. В нашем случае их три. Цифры 0, 1, 2 после параметра items — порядковые номера условий в списке, где 0 — первое условие. Впишите вместо «На 3 месяца», «На 6 месяцев» и «На 10 месяцев» текст для вариантов рассрочки или кредита, как их будет видеть покупатель. Замените installment_0_0_3_4, installment_0_0_6_5 и installment_0_0_10_10 на промокоды для рассрочек или кредитов с условиями, которые хотите предложить покупателю. Промокоды выдает менеджер в личном кабинете руководителя после подключения сервиса рассрочек

   label=Выберите срок

   Текст над списком. Напишите вместо «Выберите срок» свой текст

   items.0.text=На 3 месяца&

   items.0.value=

   installment_0_0_3_4

   items.1.text=На 6 месяцев&

   items.1.value=

   installment_0_0_6_4

   items.2.text=На 9 месяцев&

   items.2.value=

   installment_0_0_9_9,5

   Варианты условий в выпадающем списке. В нашем случае их три. Цифры 0, 1, 2 после параметра items — порядковые номера условий в списке, где 0 — первое условие.

   Впишите вместо «На 3 месяца», «На 6 месяцев» и «На 10 месяцев» текст для вариантов рассрочки или кредита, как их будет видеть покупатель.

   Замените installment_0_0_3_4, installment_0_0_6_5 и installment_0_0_10_10 на промокоды для рассрочек или кредитов с условиями, которые хотите предложить покупателю. Промокоды выдает менеджер в личном кабинете руководителя после подключения сервиса рассрочек
8. Нажмите «Сохранить и закрыть» → «Опубликовать». Меню с выбором срока и кнопка оплаты в корзине будут выглядеть так: