Инструкция по интеграции кнопки «Купить в рассрочку» или «Купить в кредит» на сайт

Из каких этапов состоит интеграция кнопки на сайт?

Интеграция кнопки состоит из трех этапов:

Ниже — пошаговые инструкции к каждому этапу.

Для интеграции нужен разработчик.

Как подготовиться к интеграции кнопки на сайт?

Следуйте этой инструкции:

Подключите сервис кредитования покупателей.
Получите информацию для начала работы. Вот что нужно подготовить
Определитесь, какая кнопка вам подходит. Есть несколько вариантов размещения кнопки на сайте.
В карточке товара. Вставьте кнопку рядом с другой кнопкой — «Купить».
В корзине или в способах оплаты. Покупатель сможет оплатить в рассрочку или кредит все товары в корзине сразу.
Определите, какие данные о товарах нужно передавать в кредитную заявку: название, количество, цену. Эти данные покупатель не будет вносить самостоятельно. При нажатии на кнопку он сразу перейдет к заполнению информации о себе в заявке. Если он оставит номер телефона или эл. почту, впишите их в заявку, чтобы покупатель не вносил их заново.
Определитесь, нужно ли вам автоподтверждение. Эта функция подойдет магазинам, которые всегда готовы выдать товар: им не нужно проверять наличие на складе и сверяться с системой учета. Остальным можно выбрать ручное подтверждение через личный кабинет агента или с помощью API.
Автоподтверждение можно включить в личном кабинете руководителя: перейдите в «Кредитование в магазинах» → выберите компанию → «Редактировать». Поставьте галочку в блоке «Автоподтверждение интернет-заказов». Чтобы выключить автоподтверждение, просто уберите галочку.

Готово! Можно переходить к интеграции. Перед этим этапом заранее почитайте об уведомлениях в интеграции.

Как добавить кнопку на сайт?

Установите кнопку с помощью скрипта и протестируйте, подключите npm-пакет, задайте стили кнопок и начните продажи.

Тестирование:

1. Установите скрипт и вставьте код кнопки в HTML-код сайта. Выберите нужный для этого код ниже.

Подключение npm-пакета

Подключение через скрипт

Страница с подключенным скриптом

Демо-заявка на кредит в модальном окне

Демо-заявка на рассрочку в модальном окне

Демо-заявка в новой вкладке

Демо-заявка на странице

Демо-заявка с
предзаполненными данными

Заявка на кредит модальном окне

Заявка на рассрочку в модальном окне

Заявка в новой вкладке

Заявка на странице

Заявка по ссылке

Работа с событиями заявки

2. Прежде чем начинать продажи в рассрочку или кредит, проверьте работу сервиса на вашем сайте. Используйте tinkoff.createDemo — метод создания демонстрационных заявок. Демонстрационные заявки показывают весь процесс работы с брокером. Какие методы скрипта используют для интеграции кнопки

Демонстрационные заявки не отправляются в банк. Но вы сможете посмотреть, как работает заполнение и что увидят ваши покупатели, а также заполнить заявку самостоятельно.

Пример тестовой интеграции кнопки ↓

Вы сможете протестировать разные варианты. Для этого используйте параметр demoFlow из метода CreateDemo:

sms — подписание покупателем кредитных документов с помощью СМС;
appointment — подписание покупателем документов на встрече с представителем банка;
reject — отказ покупателю в рассрочке или кредите. Для создания тестовой заявки используйте shopID, showcaseID и promocode, которые получили на этапе подготовки.

Для тестирования и реального старта продаж используются одинаковые параметры, но разные методы.

3. Установите пакет npm i @tcb-web/create-credit -S.

Пример использования ↓

4. Настройте стили кнопок.

Вид

Класс	Описание
TINKOFF_BTN_YELLOW	Желтая кнопка. По умолчанию среднего размера. (TINKOFF_SIZE_M) Высота кнопок в px: XL—60 L—56 M—44 S—32 Ширина определяется контентом автоматически. Текст внутри по умолчанию: «Купить в кредит». Вставьте ваш текст, если нужно

Размер

Класс	Описание
TINKOFF_SIZE_S	Маленький размер кнопки
TINKOFF_SIZE_M	Средний размер кнопки Установлен по умолчанию
TINKOFF_SIZE_L	Большой размер кнопки
TINKOFF_SIZE_XL	Самый большой размер кнопки

5. Настройте события заявки. Если заявка открывается в айфрейме или модальном окне на странице, можно узнавать о ее состоянии через подписку на события.

События заявки

Событие	Описание
tinkoff.constants.SUCCESS	Заявка подписана
tinkoff.constants.APPROVED	Заявка одобрена
tinkoff.constants.APPOINTED	Покупатель назначил встречу для подписания документов
tinkoff.constants.REJECT	По заявке отказано
tinkoff.constants.CANCEL	Покупатель отменил заявку

Технические события

Событие	Описание
tinkoff.constants.READY	Заявка успешно открылась
tinkoff.constants.ERROR_RESUME	При загрузке заявки внутри айфрейма произошла ошибка
tinkoff.constants.SCROLL_TOP	Заявку нужно проскроллить вверх
tinkoff.constants.RECALCULATE_HEIGHT	Произошло изменение высоты формы. Значение высоты находится внутри message.data.height
tinkoff.constants.KEEP_ALIVE	Покупатель работает с заявкой. Отправляется не чаще раза в минуту

Интеграция и старт продаж:

Замените метод tinkoff.createDemo на tinkoff.create. Такие заявки отправятся в банк. Какие методы скрипта используют для интеграции кнопки
Расскажите своим покупателям о новом способе оплаты — в рассрочку или кредит — любым удобным для вас способом.

После старта продаж переходите к работе с заявкой.

Как работать с заявкой?

Используйте эту инструкцию:

Покупатель оформляет заказ и по кнопке «Купить в кредит» переходит к заявке на рассрочку или кредит.
Банк в течение двух минут принимает решение и сообщает о нем покупателю в форме заявки.
Решение по заявке также придет покупателю по СМС или эл. почте, если он указал адрес при оформлении.
В личном кабинете агента статус заявки меняется на «Одобрено» в случае положительного решения или «Отказано банком» в случае отрицательного. На адрес эл. почты, который указан в личном кабинете руководителя, придут нотификации approved или rejected. Какие нотификации используют для интеграции
Если заявку одобрили, покупатель подписывает договор доступным способом: по СМС или на встрече с представителем.
Банк сообщит вам о подписании договора по эл. почте и в личном кабинете агента.
Если у вас включено автоподтверждение, после подписания договора банк переведет деньги на счет магазина автоматически. Подтверждение или отмена заявки недоступны с включенным автоподтверждением.
Если автоподтверждение выключено, вам нужно вручную подтвердить выдачу товара в личном кабинете. Если вы не можете выдать покупателю товар или услугу, отмените заявку. Статус заявки поменяется в личном кабинете агента.
Когда заявка будет подтверждена, банк переведет деньги на счет магазина.

Как выглядит схема работы с заявкой