Кнопки быстрой оплаты

Перед настройкой подключите скрипт интеграции.

Включить способы оплаты

Чтобы настроить кнопки быстрой оплаты:

В личном кабинете интернет-эквайринга перейдите в раздел Магазины.
На вкладке Способы оплаты в разделе Своя платежная форма включите нужные способы оплаты.
Поддерживаемые виджеты оплаты (WidgetType):
- sbp — кнопка оплаты через СБП.
- tpay — кнопка оплаты через T-Pay.
- bnpl — кнопка оплаты Долями.
- sberpay — кнопка оплаты через SberPay. Не отображается в WebView.
- mirpay — кнопка оплаты через Mir Pay. Отображается только для устройств на ОС Android.

Если в личном кабинете отключены все методы оплаты, отобразится способ оплаты картой.

Если включенные методы оплаты недоступны по техническим причинам, также отобразится способ оплаты картой.

Интеграция

Особенности использования метода Инициировать платеж:

Не вызывайте метод, передавая сумму в теле запроса с фронтенд-приложения — всегда используйте свой бэкенд-сервис. Если бэкенд-сервиса нет, рекомендуем использовать наш Конструктор сайтов.
Обязательно передавайте connection_type = Widget в объекте DATA — иначе мы не сможем гарантировать корректную работу виджета.

Есть два способа интеграции виджета — использовать все доступные методы оплаты или выбрать их вручную. Оба способа поддерживают установку и переопределение конфигураций.

Все доступные методы оплаты

Добавляет все включенные в личном кабинете способы оплаты в указанный контейнер. В примере — paymentContainer:

Если в личном кабинете отключены все методы оплаты, отобразится способ оплаты картой.

Если включенные методы оплаты недоступны по техническим причинам, также отобразится способ оплаты картой.

Вручную

Позволяет добавлять разные методы оплаты в разные контейнеры.

Используйте скрипт из глобальной конфигурации:

<script>
  const initConfig = {
    terminalKey: 'myTerminalKey', // Значение terminalKey из личного кабинета
    product: 'eacq',
    features: {
       payment: {}
    }
  }
</script>

Создайте экземпляр платежной интеграции — блок с кнопками оплаты:
```
const MAIN_INTEGRATION_NAME = 'main-integration-name'; // Любое название для идентификации конкретной интеграции
const MAIN_INTEGRATION_CONFIG = {}; // Интерфейс конфигурации. Подробное описание — в разделе «Конфигурация PaymentIntegrationConfig»
const mainPaymentIntegration = await integration.payments.create(MAIN_INTEGRATION_NAME, MAIN_INTEGRATION_CONFIG); // Создание интеграции
```
На этом этапе создается объект интеграции кнопок оплаты — сами способы оплаты не отображаются. Интеграция не привязана к контейнерам: такой подход позволяет использовать несколько разных интеграций со своими методами оплаты одновременно.
Вы получите объект платежной интеграции после смены контекста выполнения:
```
const mainPaymentIntegration = await integration.payments.get('main-integration-name'); // Получение интеграции
```
Смонтируйте интеграцию:

const container = document.getElementById('paymentContainer'); // Получите элемент, в который хотите встроить виджет
await mainPaymentIntegration.mount(container); // Смонтируйте интеграцию в контейнер

Отобразите кнопки платежных методов. На этом этапе определяется, какие методы оплаты отобразятся в контейнере. Предварительно включите нужные методы в личном кабинете интернет-эквайринга.
```
const widgetTypes = ['tpay']; // Доступные методы оплаты указаны в начале раздела «Включить способы оплаты»
await mainPaymentIntegration.updateWidgetTypes(widgetTypes); // Передаем нужные методы оплаты в интеграцию
```
Скрипт определяет, включены ли способы оплаты в личном кабинете интернет-эквайринга. Если способы оплаты:
- отключены в личном кабинете, но нужны в скрипте — измените updateWidgetTypes;
- отключены в личном кабинете, но не отключены в скрипте — они будут пропущены.

Установите PaymentStartCallback. Переданная callback-функция срабатывает каждый раз, когда пользователь нажимает кнопку оплаты на платежной форме. При нажатии подразумевается вызов метода Инициировать платеж.

В функции должен вернуться string с PaymentURL — например, https://securepayments.tinkoff.ru/uuid.

<script>
  const initConfig = { // Интерфейс IntegrationInitConfig. Подробное описание — в разделе «Скрипт интеграции → Конфигурация»
    ...
  }

  function onPaymentIntegrationLoad() {
     PaymentIntegration.init(initConfig)
       .then(async (integration) => {

         /*
           Переданный callback сработает каждый раз при нажатии на кнопку оплаты
         */
         await integration.payments.setPaymentStartCallback(async () => {
           /**
            * Функция paymentStartCallback должна возвращать Promise, который резолвит ссылку платежной формы — PaymentURL
            *
            * В этой функции должен вызываться ваш бэкенд-сервис — в него передается внутренний orderId
            * Бэкенд-сервис находит необходимые для запроса метода «Инициировать платеж» поля (например, сумма) внутри вашей системы и отправляет запрос
            * PaymentURL из ответа должен вернутся на фронтенд в paymentStartCallback
            *
            * Пример:
            * const res = await new PaymentIntegration.Helpers().request(URL, 'POST', INIT_PARAMS);
            * return res.PaymentURL;
            *
            * Переменная PaymentIntegration содержит класс-помощник Helpers c методом request для отправки запросов на бэкенд
            * В примере URL — это URL вашего бэкенд-сервиса, который вызовет метод «Инициировать платеж» и вернет PaymentURL
            *
            * @param {OverlayType} paymentType — способ оплаты, выбранный пользователем
            * @returns {Promise<string>}
            */
           const res = await integration.helpers.init(URL, 'POST', {}); // URL — это URL вашего бэкенд-сервиса, который вызовет метод «Инициировать платеж»

           return res.paymentUrl;
         });
       }
     ).catch();
  }
</script>

Настроить виджет

Оба способа интеграции поддерживают настройку виджета:

Получите объект платежной интеграции:

const mainPaymentIntegration = await integration.payments.get('main-integration'); // Получение интеграции. При интеграции «Все доступные способы оплаты» присваивается имя "main-integration"

Используйте методы для передачи настроек: