Оформление заказа на телефоне в три шага

Мобильный чекаут — это три экрана: контакты, доставка, оплата. Каждый умещается в один экран телефона без прокрутки, и после каждого состояние заказа уходит на сервер. Ниже — как это устроено внутри и почему разбито именно так.

Разговор пойдёт не про кнопки и отступы, а про то, где живут данные между шагами и что происходит, когда покупатель закрывает вкладку на середине.

Главное решение: заказ создаётся до оплаты

Это разворачивает всю остальную конструкцию. Обычная схема — собрать данные в браузере и отправить их на сервер одним пакетом при нажатии «оплатить». Она хрупкая: до момента оплаты заказа не существует нигде, кроме памяти телефона.

Мы делаем иначе. Как только человек ввёл телефон и перешёл ко второму шагу, на сервере появляется заказ в статусе «черновик». У него есть номер, состав и владелец. Дальше шаги только дополняют эту запись.

Что это даёт:

• Покупатель может закрыть вкладку и вернуться — черновик подтянется по номеру телефона или по ссылке из письма.
• Менеджер видит незавершённые заказы и может позвонить, если товар дорогой.
• Сумма и наличие пересчитываются на сервере, а не в браузере, и подделать их нельзя.

Цена решения — в базе копятся черновики, которые никогда не станут заказами. Их надо чистить по расписанию, иначе через полгода в списке заказов будет мусор.

Экран первый: кто вы

Одно поле — телефон. Имя запрашивается тут же, но необязательным: его можно уточнить потом.

Почему телефон, а не почта: на телефоне ввод номера — это цифровая клавиатура и автоподстановка, а ввод адреса почты — переключение раскладок и опечатки. Почту спрашиваем на третьем шаге, когда покупатель уже вложился в процесс.

Технически на этом шаге происходит три вещи. Номер нормализуется к единому виду, чтобы +7, 8 и 7 не создавали трёх разных клиентов. По номеру ищется существующий покупатель — если нашли, следующие шаги подставляются из прошлого заказа. Создаётся черновик заказа с текущим составом корзины.

Экран второй: куда везти

Здесь живёт основная сложность. Способы доставки не список констант, а результат запроса: они зависят от города, габаритов, веса и наличия товара на складе.

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

Выбор пункта выдачи — отдельный экран поверх текущего, с картой и списком. На мебельном проекте ToYou Wood доставка идёт через агрегатор, у которого 1 240 пунктов выдачи; показывать их все на карте телефона бессмысленно, поэтому список сортируется по расстоянию от введённого адреса и ограничивается ближайшими.

Важная деталь реализации: выбранный пункт сохраняется в черновик сразу, а не при переходе дальше. Карта — самое частое место, где человек случайно уходит назад.

Экран третий: как платить

Способы оплаты, итоговая сумма с доставкой, кнопка. Ничего больше.

Состав заказа на этом экране показывается свёрнутым списком в одну строку: «3 товара, 14 200 ₽», с возможностью развернуть. Полный состав здесь уже не нужен — он был в корзине, и повторный показ добавляет прокрутку там, где её быть не должно.

При нажатии кнопки происходит переход на страницу платёжного шлюза. Заказ переводится из черновика в статус «ожидает оплаты», и с этого момента остатки резервируются. До этого не резервируются — иначе брошенные черновики заблокируют склад.

Что происходит после оплаты

Шлюз возвращает покупателя на страницу заказа, но полагаться на этот возврат нельзя: человек может закрыть вкладку прямо на странице банка. Поэтому подтверждение приходит вторым путём — уведомлением от шлюза напрямую на сервер.

Дальше по цепочке. Пробивается онлайн-чек, ссылка на него сохраняется в заказе. Создаётся отправление в службе доставки, приходит трек-номер, печатается этикетка.

На ToYou Wood это доведено до конца: человеку остаётся приклеить этикетку и отдать курьеру.

Каждый шаг цепочки должен уметь повториться. Если служба доставки не ответила, заказ не должен зависнуть — задача уходит в очередь и повторяется, а менеджер видит в карточке, что отправление ещё не создано.

Клавиатура, автозаполнение и прочая мелочь

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

Автозаполнение работает только тогда, когда поля названы стандартными именами. Браузер подставит адрес и телефон сам, если понял, что это за поле; на произвольных названиях он молчит, и покупатель вводит всё руками.

Отдельно про кнопку. На телефоне она должна оставаться видимой при открытой клавиатуре и не прыгать при появлении подсказок под полем адреса. Проверяется это только на живом устройстве, эмулятор в браузере такой сдвиг не показывает.

Где чаще всего ломается

Три места, на которые стоит смотреть при приёмке чужого чекаута.

Первое — пересчёт суммы. Если итог считается в браузере и отправляется на сервер вместе с заказом, его можно изменить. Сумма должна считаться на сервере из состава и цен в базе.

Второе — двойные заказы. Покупатель нажимает кнопку дважды, и создаются два заказа. Лечится идентификатором черновика: повторное нажатие попадает в ту же запись.

Третье — возврат с шага назад. Человек вернулся со второго шага на первый, поменял телефон, пошёл вперёд — и попал в чужой черновик. Проверяется руками за пять минут.

Кому три шага не нужны

Магазину с одним товаром и предоплатой без доставки. Там чекаут честно умещается в один экран: телефон, кнопка, всё.

Не нужны они и там, где заказ всё равно подтверждается звонком менеджера — в мебели на заказ, в сложном оборудовании, в услугах. В таком случае форма собирает контакт и параметры, а остальное происходит в разговоре, и городить три шага смысла нет.

И наоборот: чем больше в заказе позиций и вариантов доставки, тем сильнее окупается разделение. На каталоге в сотни позиций разница между аккуратным чекаутом и формой на два экрана видна в числе доведённых до оплаты заказов.

Коротко

Мобильное оформление разбивается на три экрана — контакты, доставка, оплата, — и заказ создаётся на сервере в виде черновика уже после первого. Сумма, наличие и способы доставки считаются на сервере, а не в браузере. Подтверждение оплаты принимается уведомлением от шлюза, а не возвратом покупателя, и дальше цепочка чек — отправление — этикетка идёт сама. Магазину с одним товаром и без доставки такая конструкция избыточна.