Из каких этапов состоит интеграция кнопки на сайт?
Интеграция кнопки состоит из трех этапов:
Ниже — пошаговые инструкции к каждому этапу.
Для интеграции нужен разработчик.
Интеграция кнопки состоит из трех этапов:
Ниже — пошаговые инструкции к каждому этапу.
Для интеграции нужен разработчик.
Следуйте этой инструкции:
В карточке товара. Вставьте кнопку рядом с другой кнопкой — «Купить».
В корзине или в способах оплаты. Покупатель сможет оплатить в рассрочку или кредит все товары в корзине сразу.
Определите, какие данные о товарах нужно передавать в кредитную заявку: название, количество, цену. Эти данные покупатель не будет вносить самостоятельно. При нажатии на кнопку он сразу перейдет к заполнению информации о себе в заявке. Если он оставит номер телефона или эл. почту, впишите их в заявку, чтобы покупатель не вносил их заново.
Определитесь, нужно ли вам автоподтверждение. Эта функция подойдет магазинам, которые всегда готовы выдать товар: им не нужно проверять наличие на складе и сверяться с системой учета. Остальным можно выбрать ручное подтверждение через личный кабинет агента или с помощью API.
Автоподтверждение можно включить в личном кабинете руководителя: перейдите в «Кредитование в магазинах» → выберите компанию → «Редактировать». Поставьте галочку в блоке «Автоподтверждение интернет-заказов». Чтобы выключить автоподтверждение, просто уберите галочку.
Готово! Можно переходить к интеграции. Перед этим этапом заранее почитайте об уведомлениях в интеграции.
Установите кнопку с помощью скрипта и протестируйте, подключите npm‑пакет, задайте стили кнопок и начните продажи.
Тестирование:
Демонстрационные заявки не отправляются в банк. Но вы сможете посмотреть, как работает заполнение и что увидят ваши покупатели, а также заполнить заявку самостоятельно.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://forma.tinkoff.ru/static/onlineScript.js"></script>
</head>
<body>
<button
type="button"
class="TINKOFF_BTN_YELLOW"
onclick="tinkoff.createDemo({
shopId: 'SHOP_ID',
showcaseId: 'SHOWCASE_ID',
demoFlow: 'sms',
items: [
{name: 'iPhone 11′, price: 100000, quantity: 1},
{name: 'Чехол', price: 500, quantity: 1}
],
sum: 100500
})"
></button>
</body>
</html>
Вы сможете протестировать разные варианты. Для этого используйте параметр demoFlow из метода CreateDemo:
Для тестирования и реального старта продаж используются одинаковые параметры, но разные методы.
import tinkoff from '@/';
tinkoff.create ({
shopId: 'SHOP_ID',
showcaseId: 'SHOWCASE_ID',
items: [
{name: 'iPhone 11′, price: 100000, quantity: 1},
{name: 'Чехол', price: 500, quantity: 1}
],
sum: 100500
});
Класс | Описание |
---|---|
TINKOFF_BTN_YELLOW |
Желтая кнопка. По умолчанию среднего размера (TINKOFF_SIZE_M).
Высота кнопок в px: XL — 60, L — 56, M — 44, S — 32. Ширина определяется контентом автоматически. Текст внутри по умолчанию: «Купить в кредит». Вставьте ваш текст, если нужно |
Высота кнопок в px: XL — 60, L — 56, M — 44, S — 32.
Ширина определяется контентом автоматически.
Текст внутри по умолчанию: «Купить в кредит». Вставьте ваш текст, если нужно
Класс | Описание |
---|---|
TINKOFF_SIZE_S | Маленький размер кнопки |
TINKOFF_SIZE_M | Средний размер кнопки. Установлен по умолчанию |
TINKOFF_SIZE_L | Большой размер кнопки |
TINKOFF_SIZE_XL | Самый большой размер кнопки |
Событие | Описание |
---|---|
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 | Покупатель работает с заявкой. Отправляется не чаще раза в минуту |
Интеграция и старт продаж:
После старта продаж переходите к работе с заявкой.
Используйте эту инструкцию:
Если автоподтверждение выключено, вам нужно вручную подтвердить выдачу товара в личном кабинете. Если вы не можете выдать покупателю товар или услугу, отмените заявку. Статус заявки поменяется в личном кабинете агента.
Когда заявка будет подтверждена, банк переведет деньги на счет магазина.
Как выглядит схема работы с заявкойВсего их четыре.
Описание
Метод для создания заявки. Принимает два объекта: первый — параметры заявки, второй — способ отображения. В случае view = 'iframe' метод возвращает промис с инстансом айфрейма, который содержит destroy для его удаления.
Параметры
Название | Описание | Тип | Обязательный |
---|---|---|---|
shopId | Идентификатор магазина | string(50) | Да |
showcaseId | Идентификатор витрины (сайта) | string(50) | Нет |
sum | Общая сумма заказа | number | Да |
items | Список товаров | array Структура | Да |
orderNumber | Идентификатор заказа в системе партнера | string(64) | Нет |
promoCode | Идентификатор кредитного продукта(кредит/рассрочка) | string(256) | Нет |
webhookURL | Ссылка для отправки вебхуков, если не указана, то будет использована ссылка из настроек витрины | string | Нет |
successURL | Ссылка для возврата в случае успешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
failURL | Ссылка для возврата в случае неуспешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
returnURL | Ссылка для возврата в случае отмены заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
useReturnLinks | Флаг, который указывает, что на финальных экранах в айфрейме и модальном окне будет показана кнопка "Вернуться в магазин". При нажатии на эту кнопку, скрипт инициирует редирект пользователя на одну из возвратных ссылок в зависимости от сценария | boolean | Нет |
values | Данные покупателя для предзаполнения формы | object | Нет |
values.contact | Контакт | object | Нет |
values.contact.fio | ФИО покупателя | object | Нет |
values.contact.fio.lastName | Фамилия покупателя | string | Нет |
values.contact.fio.firstName | Имя покупателя | string | Нет |
values.contact.fio.middleName | Отчество покупателя | string | Нет |
values.contact.mobilePhone | Телефон покупателя. Подходит строка с номером телефона в любом формате. | string | Нет |
values.contact.email | Email покупателя | string | Нет |
Items
Название | Описание | Тип | Обязательный |
---|---|---|---|
name | Название товарной позиции | string(255) | Да |
quantity | Количество единиц товара в позиции | integer int32 | Да |
price | Цена одной единицы товара | number | Да |
category | Категория товара | string(255) | Нет |
vendorCode | Артикул | string(64) | Нет |
Второй параметр — способ отображения.
Необязателен. Если не указать, то форма откроется в модальном окне.
Название | Описание | Тип | Обязательный |
---|---|---|---|
view |
В каком виде отображать:
| enum newTab, self, modal, iframe | Да |
target | Идентификатор элемента, в который будет встроен iframe. Используется в document.querySelector | string |
Нет
обязательный, если view = 'iframe' |
Метод для создания демонстрационной версии заявки. Принимает два объекта: первый — параметры заявки, второй — способ отображения. В случае view = 'iframe' метод возвращает промис с инстансом айфрейма, который содержит destroy для его удаления.
Параметры
Название | Описание | Тип | Обязательный |
---|---|---|---|
shopId | Идентификатор магазина | string(50) | Да |
showcaseId | Идентификатор витрины (сайта) | string(50) | Нет |
sum | Общая сумма заказа | number | Да |
items | Список товаров | array Структура | Да |
orderNumber | Идентификатор заказа в системе партнера | string(64) | Нет |
promoCode | Идентификатор кредитного продукта(кредит/рассрочка) | string(256) | Нет |
webhookURL | Ссылка для отправки вебхуков, если не указана, то будет использована ссылка из настроек витрины | string | Нет |
successURL | Ссылка для возврата в случае успешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
failURL | Ссылка для возврата в случае неуспешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
returnURL | Ссылка для возврата в случае отмены заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
useReturnLinks | Флаг, который указывает, что на финальных экранах в айфрейме и модальном окне будет показана кнопка "Вернуться в магазин". При нажатии на эту кнопку, скрипт инициирует редирект пользователя на одну из возвратных ссылок в зависимости от сценария | boolean | Нет |
values | Данные покупателя для предзаполнения формы | object | Нет |
values.contact | Контакт | object | Нет |
values.contact.fio | ФИО покупателя | object | Нет |
values.contact.fio.lastName | Фамилия покупателя | string | Нет |
values.contact.fio.firstName | Имя покупателя | string | Нет |
values.contact.fio.middleName | Отчество покупателя | string | Нет |
values.contact.mobilePhone | Телефон покупателя. Подходит строка с номером телефона в любом формате. | string | Нет |
values.contact.email | Email покупателя | string | Нет |
demoFlow | Доступные флоу для демо заявки | enum sms, appointment, reject, appointment-reject | Нет |
initialStage | Идентификатор начального состояния заявки. Схема заявки | enum appointment, filling, wait‑offer, offers‑all, wait‑offers‑all, eastern-express-issued, eastern-express‑sms, mts‑appointment, mts‑issued, kvk‑issued, canceled, rejected, kvk‑signing‑sms, wait‑offer-timeout | Нет |
Items
Название | Описание | Тип | Обязательный |
---|---|---|---|
name | Название товарной позиции | string(255) | Да |
quantity | Количество единиц товара в позиции | integer int32 | Да |
price | Цена одной единицы товара | number | Да |
category | Категория товара | string(255) | Нет |
vendorCode | Артикул | string(64) | Нет |
Второй параметр — способ отображения.
Необязателен. Если не указать, то форма откроется в модальном окне.
Название | Описание | Тип | Обязательный |
---|---|---|---|
view |
В каком виде отображать:
| enum newTab, self, modal, iframe | Да |
target | Идентификатор элемента, в который будет встроен iframe. Используется в document.querySelector | string | Нет обязательный, если view = 'iframe' |
Метод для генерации ссылки на заявку. Принимает один объект — параметры заявки. Возвращает промис со ссылкой.
Параметры
Название | Описание | Тип | Обязательный |
---|---|---|---|
shopId | Идентификатор магазина | string(50) | Да |
showcaseId | Идентификатор витрины (сайта) | string(50) | Нет |
sum | Общая сумма заказа | number | Да |
items | Список товаров | array Структура | Да |
orderNumber | Идентификатор заказа в системе партнера | string(64) | Нет |
promoCode | Идентификатор кредитного продукта(кредит/рассрочка) | string(256) | Нет |
webhookURL | Ссылка для отправки вебхуков, если не указана, то будет использована ссылка из настроек витрины | string | Нет |
successURL | Ссылка для возврата в случае успешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
failURL | Ссылка для возврата в случае неуспешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
returnURL | Ссылка для возврата в случае отмены заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
useReturnLinks | Флаг, который указывает, что на финальных экранах в айфрейме и модальном окне будет показана кнопка "Вернуться в магазин". При нажатии на эту кнопку, скрипт инициирует редирект пользователя на одну из возвратных ссылок в зависимости от сценария | boolean | Нет |
values | Данные покупателя для предзаполнения формы | object | Нет |
values.contact | Контакт | object | Нет |
values.contact.fio | ФИО покупателя | object | Нет |
values.contact.fio.lastName | Фамилия покупателя | string | Нет |
values.contact.fio.firstName | Имя покупателя | string | Нет |
values.contact.fio.middleName | Отчество покупателя | string | Нет |
values.contact.mobilePhone | Телефон покупателя. Подходит строка с номером телефона в любом формате. | string | Нет |
values.contact.email | Email покупателя | string | Нет |
Items
Название | Описание | Тип | Обязательный |
---|---|---|---|
name | Название товарной позиции | string(255) | Да |
quantity | Количество единиц товара в позиции | integer int32 | Да |
price | Цена одной единицы товара | number | Да |
category | Категория товара | string(255) | Нет |
vendorCode | Артикул | string(64) | Нет |
Второй параметр — способ отображения.
Необязателен. Если не указать, то форма откроется в модальном окне.
Название | Описание | Тип | Обязательный |
---|---|---|---|
view |
В каком виде отображать:
| enum newTab, self, modal, iframe | Да |
target | Идентификатор элемента, в который будет встроен iframe. Используется в document.querySelector | string | Нет обязательный, если view = 'iframe' |
Метод для генерации ссылки на демонстрационную заявку. Принимает один объект — параметры заявки. Возвращает промис со ссылкой.
Параметры
Название | Описание | Тип | Обязательный |
---|---|---|---|
shopId | Идентификатор магазина | string(50) | Да |
showcaseId | Идентификатор витрины (сайта) | string(50) | Нет |
sum | Общая сумма заказа | number | Да |
items | Список товаров | array Структура | Да |
orderNumber | Идентификатор заказа в системе партнера | string(64) | Нет |
promoCode | Идентификатор кредитного продукта(кредит/рассрочка) | string(256) | Нет |
webhookURL | Ссылка для отправки вебхуков, если не указана, то будет использована ссылка из настроек витрины | string | Нет |
successURL | Ссылка для возврата в случае успешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
failURL | Ссылка для возврата в случае неуспешного завершения заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
returnURL | Ссылка для возврата в случае отмены заявки. Если не указана, то будет использована ссылка из настроек витрины. Нельзя указывать ссылки для возврата, если в настройках точки не указан сайт. Домены из настроек и домены в запросе должны совпадать | string | Нет |
useReturnLinks | Флаг, который указывает, что на финальных экранах в айфрейме и модальном окне будет показана кнопка "Вернуться в магазин". При нажатии на эту кнопку, скрипт инициирует редирект пользователя на одну из возвратных ссылок в зависимости от сценария | boolean | Нет |
values | Данные покупателя для предзаполнения формы | object | Нет |
values.contact | Контакт | object | Нет |
values.contact.fio | ФИО покупателя | object | Нет |
values.contact.fio.lastName | Фамилия покупателя | string | Нет |
values.contact.fio.firstName | Имя покупателя | string | Нет |
values.contact.fio.middleName | Отчество покупателя | string | Нет |
values.contact.mobilePhone | Телефон покупателя. Подходит строка с номером телефона в любом формате. | string | Нет |
values.contact.email | Email покупателя | string | Нет |
demoFlow | Доступные флоу для демо заявки | enum sms, appointment, reject, appointment-reject | Нет |
initialStage | Идентификатор начального состояния заявки. Схема заявки | enum appointment, filling, wait‑offer, offers‑all, wait‑offers‑all, eastern-express-issued, eastern-express‑sms, mts‑appointment, mts‑issued, kvk‑issued, canceled, rejected, kvk‑signing‑sms, wait‑offer-timeout | Нет |
Items
Название | Описание | Тип | Обязательный |
---|---|---|---|
name | Название товарной позиции | string(255) | Да |
quantity | Количество единиц товара в позиции | integer int32 | Да |
price | Цена одной единицы товара | number | Да |
category | Категория товара | string(255) | Нет |
vendorCode | Артикул | string(64) | Нет |
Второй параметр — способ отображения.
Необязателен. Если не указать, то форма откроется в модальном окне.
Название | Описание | Тип | Обязательный |
---|---|---|---|
view |
В каком виде отображать:
| enum newTab, self, modal, iframe | Да |
target | Идентификатор элемента, в который будет встроен iframe. Используется в document.querySelector | string | Нет обязательный, если view = 'iframe' |