Блок управления подпиской в личном кабинете сайта

Требуется отрисовать внешний вид блока управления подпиской на странице профиля. Блок содержит:

· Информацию о статусе учетной записи

· Ссылку «Управление подпиской»

Пример с указанием места размещения изображен на рисунке 3.

Статус учетной записи выводится в формате: «Тип аккаунта: бесплатный», всего доступно 4 типа:

o Бесплатный;

o Платный, 1 неделя (до ДД.ММ.ГГГГ);

o Платный, 1 месяц (до ДД.ММ.ГГГГ);

o Платный, 1 год (до ДД.ММ.ГГГГ);

Рис. 3. Место для размещения блока управления подпиской.

Ссылка ведет на соответствующий раздел, описанный ниже.

Страница оплаты

Схема страницы изображена на рисунке 4.

Требуется отрисовать страницу оплаты, доступную по ссылке «Управление подпиской» на странице профиля пользователя в разделе личного кабинета.

Страница помимо общих элементов страниц содержит:

· Блок выбора способа оплаты;

· Блок оплаты;

Блок выбора оплаты содержит блоки способов оплаты:

· Кредитные карточки

· Прочие способы оплаты

Каждый вариант оплаты содержит иконку и название. И иконка, и название кликабельны, при клике в области блока оплаты выводится соответствующий контент.

Способ оплаты «Кредитные карточки» в блоке оплаты содержит:

o Блок выбора срока пользования подписки

o Форму оплаты

o Чек-бокс согласия на регламентную оплату

Блок выбора срока пользования содержит заголовок и блоки возможных сроков. Каждый срок пользования содержит изображение, собственно срок пользования (1 неделя, 1 месяц, 1 год) и стоимость оплаты в формате: «Итого: Х рублей». По умолчанию выбран «1 год». Причем, если выбран другой период, над вариантом «1 год» остается метка «Популярно!».

Форма оплаты для «Кредитные карточки» содержит поля:

· Номер карты

· Имя владельца карты

· «Действует до» (выполняется в виде двух полей месяц / год)

· CVC2/CVV2

Абсолютно все поля обязательны для заполнения. Пользователь вводит данные и нажимает на кнопку «Оплатить картой», после чего происходит проверкая введенных данных на корректность. Если данные введены верно, пользователь видит сообщение «Спасибо, Ваш платеж принят и будет обработан в течении 12 часов.», если же данные некорректны – пользователь видит сообщение об ошибке.

Чекбокс согласия на регламентную оплату содержит текст: «Я разрешаю снимать с моего платежного средства Х рублей каждый Y.» (Х – сумма в рублях, Y – неделю, месяц или год) и ссылку «Условия оплаты», причем чекбокс по умолчанию проставлен. При клике на ссылку пользователь попадает на страницу с текстом условия оплаты.

Страница «Условия оплаты» помимо шапки и футера содержит текст:
"Завершая оплату, Вы разрешаете Tinkoff Pay снимать с Вашего платежного средства *** р каждый ***. Вы можете изменить способ оплаты или отменить подписку в любой момент в Управлении подпиской (СДЕЛАТЬ ГИПЕРССЫЛКОЙ). Если Вы отмените подписку, Ваша подписка отключится в конце оплаченного периода. Производя оплату, Вы соглашаетесь с тем, что потраченные на услугу деньги НЕ ПОДЛЕЖАТ ВОЗВРАТУ. В выписке с Вашего средства оплаты получатель платежа будет обозначен как ИП Багуль Олег Валерьевич (или IP Bagul OV). У Вас будет доступ к сайту iRepetitor.Guru на период, который Вы оплатили. Завершая оплату, Вы даете прямое согласие на немедленное исполнение договора (СДЕЛАТЬ ГИПЕРССЫЛКОЙ, ссылку на договор дадим позже), а также признаёте, что Ваше право отмены будет утрачено, как только Вы получите подписку на сайте iRepetitor.Guru.

Совершая покупку, Вы соглашаетесь с Условиями обслуживания (СДЕЛАТЬ ГИПЕРССЫЛКОЙ, ссылку на договор дадим позже) на сайте iRepetitor.Guru.

Вы можете пользоваться подписками iRepetitor.Guru одним кликом, используя предварительно авторизованный на iRepetitor.Guru способ оплаты. Вы можете внести изменения в Ваш авторизованный способ оплаты в любое время в настройках платежей.

Платежи обрабатывает Tinkoff Pay"

Способ оплаты «Другие способы оплаты» в блоке оплаты содержит:

o Блок выбора срока пользования подписки

o Список способов оплаты

Блок выбора срока пользования содержит заголовок и блоки возможных сроков. Каждый срок пользования содержит изображение, собственно срок пользования (1 неделя, 1 месяц, 1 год) и стоимость оплаты в формате: «Итого: Х рублей».

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

По умолчанию при загрузке страницы выбран способ оплаты карточкой.

Рис. 4. Схема страницы оплаты.

Верстка элементов сайта