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

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

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

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

В личном кабинете интернет-эквайринга перейдите в раздел Магазины.
На вкладке Прием оплаты в блоке Своя платежная форма нажмите Настроить и включите нужные способы оплаты.
Поддерживаемые виджеты оплаты (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 new PaymentIntegration.Helpers().request(URL, 'POST', {}); // URL — это URL вашего бэкенд-сервиса, который вызовет метод «Инициировать платеж»

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

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

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

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

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

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