Прием оплаты через Tinkoff (Эквайринг)

Полноценной интеграции с сервисом Tinkoff на данный момент у нас нет. Однако, вы можете реализовать приём оплаты, используя код, предоставленный банком Тинькофф, и инструкцию ниже.

Банк предоставляет 2 варианта встраивания оплаты:

Давайте рассмотрим варианты, как сделать переход к оплате при нажатии на кнопку и при отправке формы.

1. Вставьте виджет "HTML-код" в любом месте страницы.

2. В настройках виджета "HTML-код" вставьте код платежного виджета, который был получен в инструкции от Тинькофф.

3. В параметрах этого виджета нужно установить скрытие виджета с помощью класса hidden, а также добавить ID, который может указываться английскими буквами и цифрами. В данном случае это formtinkoff

4. В настройках кода формы Тинькофф необходимо изменить информацию о сумме товара, его названии и т.д.

Информацию, как это сделать, можно найти в документации:

К примеру, для платежного виджета обязательно нужно указать идентификатор магазина в строке:

<input class="tinkoffPayRow" type="hidden" name="terminalkey" value="TinkoffBankTest"

вместо TinkoffBankTest. И сумму, она указывается в строке:

<input class="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" required>

Вместо required впишите value="100" с нужной суммой в рублях

<input class="tinkoffPayRow" type="text" placeholder="Сумма заказа" name="amount" value="100"

У платёжного виджета (для кнопки подобное сделать нельзя) вы можете так же выбрать, выполнять оплату на той же странице или открыть дополнительное окно.

Для этого находим строку с name="frame":

<input class="tinkoffPayRow" type="hidden" name="frame" value="true">

И задаём значение value:

true (при переходе к оплате будет открываться окно на текущей странице) или false (будет осуществляться переход на новую страницу).

Теперь переходим к настройкам:

  1. Переход к оплате при нажатии на кнопку
  1. Переход к оплате сразу после отправки формы

Вариант 1 Переход к оплате при нажатии на кнопку

1. Переместите ранее настроенный виджет "HTML-код" рядом с кнопкой.

2. В действии кнопки укажите "Выполнить Javascript" и вставьте такой код

$('#formtinkoff1').find('form').submit()

formtinkoff1 в коде - это указание ID на нужный платежный виджет. Если будет несколько товаров со своими платежными виджетами, то для каждого виджета в коде должен указываться разный ID.

Вариант 2 Переход к оплате сразу после отправки формы

1. Переместите ранее настроенный "HTML-код" рядом с формой. Важно: Виджет должен быть не внутри виджета формы, а выше или ниже.

2. В действии формы укажите "Вставка HTML кода" или "Сообщение + вставка HTML кода" и вставьте такой код:

<script>
$('#formtinkoff1').find('form').submit()
</script>

formtinkoff1 в коде - это указание ID на нужный платежный виджет. Если будет несколько товаров со своими платежными виджетами, то для каждого виджета в коде должен указываться разный ID.

Вариант 3 Кнопка "Купить в кредит" через Интеграционный скрипт

1. Вставьте виджет "HTML-код" в том месте страницы, где должна быть кнопка.

2. В настройках виджета "HTML-код" вставьте код платежного виджета, который был получен в инструкции от Тинькофф.

<script src="https://static2.tinkoff.ru/forma/analytics/onlineScript.js"></script>

<button  type="button" class="TINKOFF_BTN_YELLOW" onclick="tinkoff.create({    shopId: 'SHOP_ID', showcaseId: 'SHOWCASE_ID', items: [{name: 'iPhone 11', price: 100000, quantity: 1}, {name: 'Чехол', price: 500, quantity: 1}],    sum: 100500  })">
</button>

Замените SHOP_ID и SHOWCASE_ID в примере на настоящие

Как это выглядит на опубликованной странице? https://support2020.creatium.site/tinkoff

Готово! Настройка выполнена 🎉

ТЕХНИЧЕСКАЯ ПОДДЕРЖКА

Не можете найти то, что ищете?

Напишите нам. на связи 24/7. Среднее время ожидания ответа: 10-15 минут. Также вы можете вступить в наш Телеграм-чат, где собралось много специалистов и пользователей.

Поддержка Creatium

Агенты ответят через 10 минут

Агенты ответят

Блог, курсы и полезные материалы 

Платформа сайтов любой сложности