Версия: latest
На главную

Разработка SDK

Этот раздел предназначен для разработчиков Payment Widget. Если вы просто пользуетесь им, то тут для вас полезного немного.

Принцип работы

Виджет работает по схожему с React принципу, хуки повторяют API и поведение React до версии 17. То есть вызов useEffectSDK не дублируется в dev режиме, а useStateSDK не копит обновления, а вызывает перерендер сразу.

Главный файл - useAppSDK.ts. Это как App.tsx в обычном React приложении.

Рендер элементов нужно делать руками. Не забывайте подчищать за собой. Пример можно увидеть тут: src/sdk/iframe.ts

Запуск тестовой среды

Сейчас поддерживается только запуст вместе с фронтом “mostbet”.

  1. Клонируйте репозиторий mostbet:
git clone git@gitlab.dats.tech:datsteam/mostbet/mostbet-front.git
  1. Убедитесь что в функция getOrigin из файла src/sdk/utils/getWidgetUrl.ts возвращает http://127.0.0.1:5173. К сожалению сейчас нет автоматического способа определить, что тестирование происходит локально, а не на dev-сервере, поэтому приходится временно редактировать этот файл.
  2. Выполните сборку sdk:
npm run sdk:build:lib -- --host=http://127.0.0.1:3001

Обратите внимание на двойной дефис: “–”. Он обязателен при использовании npm.

  1. Запустите сервер sdk:
npm run sdk:serve -- -p 3001
  1. ЕСЛИ ЭТО ПЕРВЫЙ ЗАПУСК: запустите dev сервера виджета и mostbet-front:
npm run start:with-mostbet -- -m ../mostbet-front

вместо ../mostbet-front подставьте путь к репозиторию “mostbet-front”. Если вы уже вносили изменения (см. ниже) в какие-то файлы репозитория “mostbet-front” и не хотите, чтобы они потерялись, добавьте аргумент --skip-reset:

npm run start:with-mostbet -- -m ../mostbet-front --skip-reset
  1. Убедитесь, что SDK интегрирован в мостбет. Если нет, ознакомьтесь с разделом Использование

Иногда фронт мостбета не хочет завершаться по ctrl/cms + c и висит занимая порт. К сожалению сейчас иных способов решить эту проблему, кроме ручного завершения процессов (например logout/login), я не нашёл.

Вы могли заметить странный порт 3001. Вы можете выбрать любой другой порт кроме 3000 и 5173 так как это порты для фронта мостбета и виджета соответственно. В этом случае убедитесь, что вы подставили верный порт во всех командах.