README

Скрипт для создания кредитной заявки

Документация: https://forma.tinkoff.ru/docs/credit/integration/

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

Устанавливаем зависимость

npm i @tcb-web/create-credit -S

и используем

import tinkoff from '@tcb-web/create-credit';

tinkoff.create({
  shopId: 'SHOP_ID',
  showcaseId: 'SHOWCASE_ID',
  items: [
    {name: 'iPhone 11', price: 100000, quantity: 1},
    {name: 'Чехол', price: 500, quantity: 1}
  ],
  sum: 100500
});

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

Как скрипт

<script src="https://forma.tinkoff.ru/static/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 в примере на свои значения

Подписка на события заявки

Метод tinkoff.methods.on для подписки, tinkoff.methods.off для отписки

tinkoff.methods.on(tinkoff.constants.SUCCESS, onMessage);
tinkoff.methods.on(tinkoff.constants.REJECT, onMessage);
tinkoff.methods.on(tinkoff.constants.CANCEL, onMessage);

type IframeInstance = {
  url: string,
  frameId: string,
  destroy(): void
};

type Data = {
  type: string, // Значения из tinkoff.constants
  payload: any, // Данные для экшена. Используется для тех. событий
  meta: {
    iframe: IframeInstance
  }
};

function onMessage(data: Data) {
  switch (data.type) {
    case tinkoff.constants.SUCCESS:
      console.log('SUCCESS', data.meta.iframe.url);
      break;
    case tinkoff.constants.REJECT:
      console.log('REJECT', data.meta.iframe.url);
      break;
    case tinkoff.constants.CANCEL:
      console.log('CANCEL', data.meta.iframe.url);
      break;
    default:
  }
  tinkoff.methods.off(tinkoff.constants.SUCCESS, onMessage);
  tinkoff.methods.off(tinkoff.constants.REJECT, onMessage);
  tinkoff.methods.off(tinkoff.constants.CANCEL, onMessage);
  data.meta.iframe.destroy();
}

Создание заявки вне скрипта

Используется, если создание заявки происходит не на фронте

type Res = {
  creditAppLink: string // Ссылка на нашу заявку от вашего бэка
};

fetch(...).then((res: Res) => {
  tinkoff.methods.renderIframe(res.creditAppLink); // откроется модальное окно с заявкой на кредит
  tinkoff.methods.on(tinkoff.constants.SUCCESS, ({meta}) => {
    // проверка, если у вас на странице могут одновременно открыться несколько айфреймов с разными заявками
    if (meta.iframe.url === res.creditAppLink) {
      console.log('SUCCESS');
    }
  });
});