Платежный терминал Тинькофф

[Nelfimov]

С чем связан запрос на фичу?

Необходимо добавить функционал оплаты через Тинькофф

Расскажите как вы это себе видите

Необходимо внедрить платежный терминал Тинькофф на сайт.

Используем наш виджет: https://github.com/atls/reactjs/tree/master/packages/payment-widget

Данные по терминалу у @Nelfimov @TorinAsakura

Приложите пример реализаций

Дизайн: https://www.figma.com/file/8zVI2XcuXPz7ohCSEEnw94/Drum-Instructor?type=design&node-id=1081-5422&mode=design&t=hVfbmiCuWgiCaF09-11

[absolemDev]

@Nelfimov, а есть проект где уже внедрен данный терминал?
При внедрении получаю ошибку:

widget/dist/ui/input/input.component.js:18:0
Module not found: Can't resolve 'styled-system'

хотя зависимости прописал.

[Nelfimov]

Внедрения нет, однако мы тестировали виджет. Проверяй зависимости, если что - пользуйся packageExtension у yarn.

[absolemDev]

@Nelfimov, с предыдущем вопросом packageExtension помог, но теперь вот это:

Module not found: react-laag tried to access react-dom (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

[absolemDev]

@Nelfimov, с предыдущем вопросом packageExtension помог, но теперь вот это:

Отбой, все норм

[absolemDev]

@Nelfimov, я правильно понимаю что нам придется немного отклониться от стилей в макете? Как я понял в виджете стилизация ограничена.

[Nelfimov]

Виджет создавали под «общее применение». Настройка действительно минимальная предусмотрена. Если по дизайну необходимо расширять - можешь предложить ПР в репозиторий с виджетом.

[absolemDev]

@Nelfimov, подскажешь еще с одной проблемкой. yarn check ругается:

namespace 'react' has no exported member 'jsx'.

[Nelfimov]

Очень странная ошибка. Покажи в каком файле и строке это

[absolemDev]

Вот полный вывод yarn check:

[Nelfimov]

Беглый вывод таков - у тебя несколько версий @types/react. Проверь исходники виджета.

Решение - привести к одному. Либо через resolutions либо весь проект перевести на 18 реакт

[absolemDev]

@Nelfimov, сейчас из админки мы получаем сумму в таком формате: "32 000 ₽". Можно конечно распарсить, или может создашь дополнительные поля к monthlyPayment и finalPriceForOneTimePayment чтобы получать уже валидные значения для подстановки в amount виджета.

[Nelfimov]

Я посмотрю можно ли в админке поправить это поле и форматировать его уже на клиенте.

[absolemDev]

В связи с ограничениями виджета по дополнительным полям (в частности поле telegram, чек-бокс для договора оферты) предлагаю подправить дизайн:

1. Изменить кнопку "ОПЛАТИТЬ" на "ПОДТВЕРДИТЬ" .
   
2. Кнопка "ПОДТВЕРДИТЬ" должна открывать форму виджета с дополнительными полями, если это необходимо (например email куда будет отправляться чек) и кнопка "Оплатить". Из коробки это выглядит так:
   
3. Так же, можно отобразить дополнительную информацию о платеже. Например расписать платежи по датам если это рассрочка.

Еще встал вопрос: нужно ли поле telegram в форме на оплату?

[Nelfimov]

Расширение виджета можешь начать с расшерения темы через пропсы:

https://github.com/atls/reactjs/blob/9c225ee27d48907d00806c63cbc9b6d84b61c163/packages/payment-widget/src/ui/widget.component.tsx#L21

[absolemDev]

@Nelfimov, поправил верстку в проекте, форматирую цены с помощью FormattedNumber из react-intl.
Есть неточности:

1. На странице Коннакол monthlyPaymentNumber = 8682, тогда как monthlyPayment = 8700
2. На странице Открытие ритма finalPriceForInstallmentNumber = 117400 тогда как 8700*15=130500; finalPriceForOneTimePaymentNumber = 80000 тогда как там 3 курса по 40000, должно быть 120000.
3. Так же, как я понял, на странице Открытие ритма не реализован функционал удаления курса из пакета и пересчета суммы. Или это задача для другого issue?

[Nelfimov]

1. На странице Коннакол monthlyPaymentNumber = 8682, тогда как monthlyPayment = 8700

Поправил.

2. На странице Открытие ритма finalPriceForInstallmentNumber = 117400 тогда как 8700*15=130500; finalPriceForOneTimePaymentNumber = 80000 тогда как там 3 курса по 40000, должно быть 120000.

Это пока моковые цены. Верь тому что прилетает с сервера.

3. Так же, как я понял, на странице Открытие ритма не реализован функционал удаления курса из пакета и пересчета суммы. Или это задача для другого issue?

Можешь сделать в рамках этой задачи, можешь сделать отдельно. По сути это же копипаста.

[absolemDev]

@Nelfimov, обнаружил проблему с виджетом при динамическом изменении amount. Виджет, а точнее тинькоффский скрипт запоминает значение amount переданное при первом рендере. Дебаг показал что на странице присутствует поле amount с заданным значением

но в тоже самое время скрипт тянет другое значение

[Nelfimov]

Подключай дебаг в IDE и проверяй на форке - благо так удобно. Проверяй есть ли реакция не изменения amount - должне быть частичный ререндер самого виджета, но не детей.

[Nelfimov]

Попробуй прогнать полный цикл с тестовыми картами:

• 4300 0000 0000 0777 11/22 111
• 5000 0000 0000 0009
• 4000 0000 0000 0119

[absolemDev]

@Nelfimov, удалил fork виджета, поправил зависимости, но сломался yarn dev:

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install @types/react by running:

        npm install --save-dev @types/react

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).

При этом yarn chech отрабатывает без ошибок

[Nelfimov]

Поищи где у тебя сломался @types/react. Вероятнее всего в энтрипоинте.

Проверь его версии по проекту - виджет у нас написан на 18 реакте.

Попробуй снеси виджет и проверь ошибку.