Экран оформления заказа

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

Переход к экрану Copy-icon

Чтобы перейти к оформлению заказа, нажмите на кнопку Перейти к оформлению/Proceed to Checkout на экране корзины.

Переход к экрану оформления заказа возможен, если вы авторизованы в приложении.

Изображение статьи

При попытке перехода к оформлению заказа без предварительной авторизации в системе вы будете перенаправлены на экран авторизации/регистрации.

Отображение, компоненты и поведение чекаута Copy-icon

На экране оформления заказа отображаются:

Вы можете добавлять и/или изменять все данные на чекауте.

Подробнее об отображении каждого компонента экрана читайте ниже.

Блок с товарами в заказе Copy-icon

Изображение статьи

В блоке отображается:

  • заголовок "Ваша корзина"/“Your cart“
  • количество товаров в заказе
  • итоговая сумма заказа с учетом стоимости доставки и скидок
  • список товаров в заказе в виде карусели:
    • отображается 5 изображений товаров или более (в зависимости от ширины экрана)
    • последнее изображение товара выводится частично
    • если количество единиц товара от 2 и более, то на изображении отображается лейбл “хYY”, где YY - количество единиц товара в заказе
    • навигация по карусели происходит по свайпу влево-вправо

Блок "Адрес для оплаты" Copy-icon

Изображение статьи

Блок “Адрес для оплаты”/“Payment Address“ состоит из полей:

  • Имя/First name
  • Фамилия/Last name
  • Компания/Company
  • Номер/PO box
  • Улица/Address
  • Почтовый индекс/Zip Code
  • Страна/Country
  • Город/City
  • Телефон/Phone Number

Все поля в блоке являются обязательными. Если вы попробуете перейти к оплате заказа с незаполнеными данными, то в соответствующих полях отобразится валидационное сообщение "Поле обязательно для заполнения"/"Required field".

При переходе на экран оформления заказа:

  • если история заказов пуста, то в блоке "Адрес для оплаты"/"Payment Address" поля Имя/First Name, Фамилия/Last Name и Телефон/Phone Number автоматически заполняются данными, которые были указаны во время регистрации на сайте;
  • если в истории заказов есть хотя бы один совершенный заказ, то поля в блоке Адрес для оплаты/Payment Address автоматически заполняются данными, которые были указаны во время оформления предыдущих заказов.

Блок "Получатель" Copy-icon

Изображение статьи

Блок “Получатель”/“Receiver“ состоит из полей:

  • Имя/First name
  • Фамилия/Last name
  • Телефон/Phone Number

Все поля в блоке являются обязательными. Если вы попробуете перейти к оплате заказа с незаполнеными данными, то в соответствующих полях отобразится валидационное сообщение "Поле обязательно для заполнения"/"Required field".

Блок “Доставка” Copy-icon

Изображение статьи

В блоке “Доставка”/“Delivery“ отображаются поля:

  • Компания/Company
  • Почтовый индекс/Zip Code
  • Улица/Address
  • Номер/PO box
  • Дата и время доставки/Date and time of delivery
  • Страна/Country
  • Город/City

Все поля, кроме "Номер", являются обязательными. Если вы попробуете перейти к оплате заказа с незаполнеными данными, то в соответствующих полях отобразится валидационное сообщение "Поле обязательно для заполнения"/"Required field".

При смене города срок и стоимость доставки изменяется в соответствии с расчетом логистического калькулятора.

Блок "Оплата" Copy-icon

Блок “Оплата”/“Payment“ состоит из полей:

  • Карта/Card number
  • Срок действия/Expiration date
  • CVV/CVC
  • Имя на карте/Card Holder

Все поля в блоке являются обязательными. Если вы попробуете перейти к оплате заказа с незаполнеными данными, то в соответствующих полях отобразится валидационное сообщение "Поле обязательно для заполнения"/"Required field".

Блок "Итого" Copy-icon

Изображение статьи

В блоке “Итого”/“Total“ отображается:

  • заголовок “Итого”/”Total”
  • итоговая сумма заказа с учетом стоимости доставки и скидок (с символом валюты и текстом “В том числе НДС”/“Including Tax“)
  • итоговая стоимость товаров до вычета скидки
  • стоимость доставки (если таковая имеется)
  • размер скидки
  • кнопка “Оплатить“/“Submit Order“

При смене города срок и стоимость доставки изменяется в соответствии с расчетом логистического калькулятора. Если доступных маршрутов нет (один или несколько товаров не в наличии), то кнопка Оплатить заблокирована.

По нажатию на кнопку Оплатить/Submit Order происходит переход к оплате заказа.

При успешной транзакции вы будете перенаправлены на экран успешной оплаты заказа.

Блок с условиями оферты и политикой конфиденциальности Copy-icon

Изображение статьи

Под блоком с итоговой стоимостью заказа располагается текстовый блок с ссылками для перехода на экраны с подробной информацией об условиях оферты и политике конфиденциальности: "Нажимая «Оплатить» я подтверждаю, что ознакомлен и полностью принимаю условия Публичной оферты , условия Политики конфиденциальности"/"By clicking 'Pay' I confirm that I have read and fully accept the terms Privacy Policy, the terms Terms of Service".

Связанные статьи Copy-icon

Корзина

Экран успешного оформления заказа

Микросервис delivery-orchestration

Микросервис checkout-orchestration

Микросервис user-orchestration

Микросервис price-orchestration

Микросервис region-orchestration