This package has been deprecated

Author message:

Package no longer supported. Use the method described in the documentation: https://forma.tinkoff.ru/docs/online/setup-types/script/integration

@tcb-web/create-credit

README

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

Этот npm пакет устарел. Используйте актуальный способ интеграции.

Документация: https://forma.tbank.ru/docs/online/setup-types/script/description-script

Установка

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

npm install --save @tcb-web/create-credit

Затем импортируем кнопку:

import "@tcb-web/create-credit/button"

Добавление на страницу

Пример

Кнопка с отображением в новой вкладке и предзаполненными данными покупателя

<tinkoff-create-button
  size="M"
  subtext="от 3400 ₽ в месяц"
  shopId="SHOP_ID"
  showcaseId="SHOWCASE_ID"
  ui-data="productType=installment&useReturnLinks=true&view=newTab"
  payment-data="demoFlow=sms&items.0.name=Hasta&items.0.price=19626.15&items.0.quantity=1&items.1.name=Hasta&items.1.price=1444.50&items.1.quantity=1&items.2.name=Hasta&items.2.price=84.15&items.2.quantity=1&promoCode=installment_0_0_6_5,85&sum=21154.80&values.contact.fio.firstName=Иван&values.contact.fio.lastName=Петров&values.contact.fio.middleName=Иванович&values.contact.mobilePhone=[phone]"
 ></tinkoff-create-button>

Пример

Кнопка с всплывающим меню, позволяющая пользователю выбрать один из нескольких продуктов (необходимо указать параметр promo-code-select)

<tinkoff-create-button
  size="M"
  subtext="от 3400 ₽ в месяц"
  promo-code-select="items.0.text=На 3 месяца&items.0.value=installment_0_0_3_4&items.1.text=На 6 месяцев&items.1.value=installment_0_0_6_5,85&items.2.text=На 10 месяцев&items.2.value=installment_0_0_10_10"
  shopId="SHOP_ID"
  showcaseId="SHOWCASE_ID"
  ui-data="productType=installment&useReturnLinks=true&view=newTab"
  payment-data="demoFlow=sms&items.0.name=Hasta&items.0.price=19626.15&items.0.quantity=1&items.1.name=Hasta&items.1.price=1444.50&items.1.quantity=1&items.2.name=Hasta&items.2.price=84.15&items.2.quantity=1&sum=21154.80&values.contact.fio.firstName=Иван&values.contact.fio.lastName=Петров&values.contact.fio.middleName=Иванович&values.contact.mobilePhone=[phone]"
 ></tinkoff-create-button>

[Deprecated] Старая версия API. Больше не поддерживается

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 в примере на свои значения

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

Метод 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');
    }
  });
});