Technell
Магазин помогает сравнить модели по характеристикам и инструкциям, выбрать доставку, оплатить заказ через Т-Банк и открыть его в личном кабинете.
- Модернизация витрины, личного кабинета и сценария заказа и оплаты для ООО «Технэл».
- Nuxt
- Vue
- TypeScript
- Pinia
- Directus
Задача
Покупателю нужны точные характеристики модели. Магазину важно сохранить заказ при переходе в Т-Банк и обратно, а затем получить подтверждённый статус оплаты с сервера.
Как проходит покупка
-
Сравнить и изучить модель
В категории можно сравнить модели, а в карточке — проверить масштаб, размеры, фотографии, инструкцию и цену.
-
Оформить заказ
Изменить количество, выбрать доставку, проверить итог и отдельно подтвердить правила продажи и обработку персональных данных.
-
Войти по коду и создать заказ
Получить код по почте, вернуться к оформлению и сохранить заказ в своём кабинете. Повторная отправка не создаёт второй заказ.
-
Подтвердить оплату и открыть заказ
Возврат из Т-Банка ведёт обратно в магазин, но статус оплаты сайт получает с сервера. В кабинете видны оплата или возврат; повторить платёж можно только в разрешённом состоянии.
От выбора модели до заказа в личном кабинете
Каталог, карточка товара, корзина и оформление сняты с действующей витрины. Личный кабинет и оплата показаны на реальных страницах с контрольными данными — без создания пользователя, заказа или платежа.
Каталог моделей кораблей
В категории можно сравнить типы моделей, масштаб и фотографии, а затем открыть подходящий товар.
Характеристики до покупки
В карточке вместе видны фотографии, размеры, масштаб, инструкция, цена и кнопка покупки.
Доставка на мобильном экране
В мобильной корзине на одном экране остаются количество, два способа доставки, скидка, итог и кнопка оформления.
Правила и согласия при оформлении
Реальная страница с контрольными данными: доставка, получатель, правила продажи и обработка персональных данных видны до входа. Пользователь и заказ не создавались.
Заказы в личном кабинете
Реальная страница с контрольными данными: видны номер заказа, статус оплаты, итог и ссылка на подробности. Пользователь и заказ не создавались.
Заказ и оплата на одной странице
Реальная страница с контрольными данными: вместе видны товар, доставка, итог, статус заказа, дата и номер платежа. Заказ и платёж не создавались.
После оплаты — обратно к заказу
Реальная страница с контрольными данными: показан пример статуса, подтверждённого сервером, и ссылка на заказ. Т-Банк не вызывался.
Как проходит заказ и где хранятся данные
Первая схема показывает путь покупателя. Вторая — как корзина, заказ и статус оплаты проходят между браузером, сервером сайта, банком и базой данных.
Путь покупателя
Заказ сохраняется до перехода в Т-Банк. После возвращения сервер проверяет оплату, а личный кабинет открывает сохранённый заказ.
Шесть шагов: изучить модель, проверить доставку и согласия, войти по коду из письма и создать заказ, перейти в Т-Банк, проверить оплату на сервере и открыть сохранённый заказ в личном кабинете.
Где хранятся данные
Корзина остаётся в браузере, пока покупатель её меняет. Сервер проверяет заказ и оплату перед записью в базу данных.
Браузер хранит корзину и поля оформления. Сервер сайта проверяет код входа, присланный по почте, пересчитывает заказ и начинает оплату. Т-Банк проводит платёж и возвращает его статус серверу. Directus и PostgreSQL хранят покупателей, заказы и платежи.
Что было сделано
-
Сохранять один проверенный заказ
Перед сохранением сервер заново проверяет состав и цену. Если браузер повторно отправляет тот же запрос, сервер возвращает уже созданный заказ, а не создаёт дубликат.
-
Проверять оплату на сервере
Возврат из Т-Банка открывает нужный заказ, но не помечает его оплаченным. Успех, обработка, ошибка или возврат показываются только после проверки на сервере.
-
Подготовить правила до запуска оплаты
Правила продажи, согласие на обработку данных и политика опубликованы как отдельные датированные страницы. При оформлении ссылки на них стоят рядом с двумя обязательными подтверждениями: условия покупки и обработка данных не скрыты в одной кнопке.
-
Реализовать заказ без готового движка магазина
Technell не использует готовую платформу интернет-магазина или платёжный модуль. Собственный сервер рассчитывает заказ, связывает его с покупателем, защищает от дубликатов и обменивается запросами и статусами с Т-Банком.
-
Развёртывать витрину и службу данных отдельно
Для витрины и службы данных собираются отдельные контейнеры. Автоматизация обновляет только изменённую часть, выполняет изменения данных в нужном порядке и ждёт проверки работоспособности; переключение трафика подтверждается вручную.