Войти
Малый бизнес

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

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

Интеграция кнопки состоит из трех этапов:
  1. Подготовка.
  2. Процесс интеграции.
  3. Работа с заявкой.
Ниже — пошаговые инструкции к каждому этапу.
Для интеграции нужен разработчик.

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

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

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

Установите кнопку с помощью скрипта и протестируйте, подключите npm-пакет, задайте стили кнопок и начните продажи.
Тестирование:
1. Установите скрипт и вставьте код кнопки в HTML-код сайта. Выберите нужный для этого код ниже.
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
Покупатель работает с заявкой. Отправляется не чаще раза в минуту
Интеграция и старт продаж:
  1. Замените метод tinkoff.createDemo на tinkoff.create. Такие заявки отправятся в банк. Какие методы скрипта используют для интеграции кнопки
  2. Расскажите своим покупателям о новом способе оплаты — в рассрочку или кредит — любым удобным для вас способом.
После старта продаж переходите к работе с заявкой.

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

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

Какие методы скрипта используют для интеграции кнопки?

Всего их четыре.
tinkoff.create — создание заявки ↓
tinkoff.createDemo — создание демозаявки ↓
tinkoff.createLink — создание ссылки на заявку ↓
tinkoff.createDemoLink — создание ссылки на демозаявку ↓

Заявка на кредитование покупателей

+7 (

Ввод номера телефона подтверждает ваше согласие c условиями передачи информации

Другие статьи по этой теме