Скрипт интеграции

Integration.js — способ интеграции методов оплат в приложения мерчанта.

Скрипт позволяет добавить виджет с кнопками оплаты на сайт и открывать платежную форму в iframe.

Требования к подключению

Требования к вашему сайту, чтобы использовать скрипты интеграции для виджета:

Работает по протоколу HTTPS;
На сайте нет заголовков Cross-Origin-Opener-Policy: *;

Политики CSP на сайте разрешают использование адресов:

 script-src: https://*.tinkoff.ru https://*.tcsbank.ru https://*.tbank.ru https://*.nspk.ru https://*.t-static.ru
 https://*.nspk.ru https://*.t-static.ru
 img-src: https://*.tinkoff.ru https://*.tcsbank.ru https://*.tbank.ru https://*.nspk.ru https://*.t-static.ru
 connect-src: https://*.tinkoff.ru https://*.tcsbank.ru https://*.tbank.ru https://*.nspk.ru https://*.t-static.ru
 style-src: 'unsafe-inline' https://*.tinkoff.ru https://*.tcsbank.ru https://*.tbank.ru https://*.nspk.ru https://*.t-static.ru

Для интеграции кнопок быстрой оплаты можно использовать frame-src:
```
  frame-src: https://*.tinkoff.ru https://*.tcsbank.ru https://*.tbank.ru
```
Для интеграции платежной формы в iframe использовать frame-src нельзя — директива нарушит процесс прохождения 3DS и заблокирует оплаты по карте.

Минимальные поддерживаемые версии браузеров:

Chrome — 63;
Edge — 19;
Safari — 12;
Firefox — 67;
Opera — 50;
IE — не поддерживается;
Samsung Internet — 8.2;
Opera Mobile — 73.

Подключение

Не копируйте скрипт в свою сборку полностью — рекомендуем загружать его из предоставленного URL. Это позволит использовать актуальную версию скрипта со всеми исправлениями и обновлениями безопасности.

Установите HTML-код на всех нужных страницах перед закрывающим тегом </body> и в атрибуте onload передайте название метода, который будет отвечать за инициализацию скрипта платежей:
```
<script src="https://integrationjs.tbank.ru/integration.js" onload="onPaymentIntegrationLoad()" async></script>
```

Проведите инициализацию скрипта:

<script>
  const initConfig = { // Интерфейс IntegrationInitConfig. Подробное описание в разделе "Интерфейс глобальной конфигурации"
    ...
  }    
  
  function onPaymentIntegrationLoad() {
    PaymentIntegration.init(initConfig).then().catch();
  }
</script>

Настройте конфигурацию скрипта. Используйте только те ключи объекта features (модули), которые вам нужны.

<script> 
  const initConfig = {
    terminalKey: 'myTerminalKey', // Значение terminalKey из личного кабинета
    product: 'eacq',
    features: {
       payment: {}, // Добавьте, если нужны кнопки оплаты
       iframe: {} // Добавьте, если нужно встроить платежную форму в iframe
       addcardIframe: {} // Добавьте, если нужно встроить приложение привязки карты в iframe
    }
  }
</script>

Скрипт интеграции

Требования к подключению

Подключение

Конфигурация