> For the complete documentation index, see [llms.txt](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei/ustanovka-stilei-na-stranicu-oplaty-zakaza.md).

# Установка стилей на страницу оплаты заказа

{% hint style="info" %}
В каждой школе разный набор методов оплаты. Где-то используется Get-модуль, где-то — сторонние способы оплаты. Где-то один набор способов, где-то другой. Учесть все возможные вариации, к сожалению, невозможно, поэтому в каких-то экзотических случаях могут наблюдаться погрешности. Если вы столкнулись с такой ситуацией, напишите мне, я оперативно поправлю стили. Это бесплатно.
{% endhint %}

Перед началом установки стилей убедитесь, что у вас отключена новая версия страницы оплаты от Геткурс. Иначе стили не будут применены.

Перейдите в раздел «Сайт — Страницы — Страница оплаты» и снимите чекбокс «Включить новую страницу оплаты»

<figure><img src="/files/29D01LwfA6gwBJLmYaij" alt=""><figcaption></figcaption></figure>

Сохраните изменения и переходите к системным страницам: раздел «Сайт — Страницы — Системные страницы» и откройте редактирование страницы «Оплата заказа»:

<figure><img src="/files/8Osl4MgdJ46CNh1PGxzc" alt=""><figcaption></figcaption></figure>

Если страница открылась не в редакторе, в правом верхнем углу нажмите «Настроить вид».

### 1. Установка стилей страницы

Выберите блок с информацией о заказе и о покупателе и в правой колонке в поле «Класс html-элемента» вставьте класс `order-info`.

<figure><img src="/files/RsNtEzfRTOeodGfGRFDW" alt=""><figcaption></figcaption></figure>

Теперь в папке с набором откройте папку `checkout_page`, в ней файл `checkout-styles.css`.

Скопируйте из файла все стили и вставьте в окно редактирования стилей страницы оплаты заказа:

<figure><img src="/files/bjIczwfVZ7zhz2wGfPwt" alt=""><figcaption></figcaption></figure>

### 2. Установка скриптов

Добавьте в самый низ страницы оплаты новый блок для вставки JavaScript. Для этого выберите в дереве «Область: PAGE» и нажмите кнопку «Добавить блок»:

<figure><img src="/files/HihR7pcJAIp8VFh0FV3o" alt=""><figcaption></figcaption></figure>

Затем выберите элемент JavaScript:

<figure><img src="/files/rglWdDJfyAWXE20Op75e" alt=""><figcaption></figcaption></figure>

Двойным кликом по добавленному блоку откройте его для редактирования:

<figure><img src="/files/EFbHtAYzFjPNfBAcKMTJ" alt=""><figcaption></figcaption></figure>

Откройте в папке `checkout_page` файл checkout-scripts.js. Скопируйте всё его содержимое и вставьте в блок JavaScript.

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

```
// Заданные тексты для замены
const newTexts = {
    'card-title': 'Оплата банковской картой VISA / MasterCard / МИР',
    'credit-title': 'Рассрочка и кредит',
    'other-title': 'Другие способы оплаты'
};
```

Измените заголовки на нужные вам или оставьте те, что в скрипте. Также, если вам не нужна возможность изменения текстов заголовков, можете удалить функцию замены целиком, начиная от комментария:

```
// Функция для изменения текста в заголовках блоков оплаты
```

После вставки скрипта щёлкните в районе боковой колонки редактора, чтобы закрыть окно редактирования скрипта.

Сохраните настройки страницы.

### 3. Настройка переменных страницы оплаты

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

`--display-paybuttons` — отвечает за отображение кнопок Pay-сервисов (Сбер-Pay, T-Pay, Яндекс.Pay). Установите значение `none`, чтобы скрыть этот блок. Это может понадобиться, если вы используете сторонние способы оплаты (например, ЮКассу или CloudPayments). Кнопки не выводятся, но сам блок в коде присутствует и он создаёт дополнительное пустое пространство наверху блока с методами оплаты. Поэтому его желательно скрыть. Чтобы включить отображение блока, используйте значение `flex`.

<figure><img src="/files/y8ePJczMi4WvY306Akmy" alt=""><figcaption></figcaption></figure>

`--display-offer` — отвечает за отображение текста оферты Геткурса (при использовании Get-модуля). Сталкивался с тем, что некоторые хотят скрыть отображение этого текста, поэтому добавил дополнительную переменную для него. Скрыть текст оферты — значение `none`. Отображать — `block`.

<figure><img src="/files/o5lKSi7Nwhk1jZSGNG2h" alt=""><figcaption></figcaption></figure>

`--display-alt-payments` — отвечает за отображение альтернативных способов оплаты картой. Скрыть блок — значение `none`. Отображать — `block`.

<figure><img src="/files/cxMtD9x3585WASPgeHLh" alt=""><figcaption></figcaption></figure>

`--display-credit-title` и `--display-other-title`— отвечают за отображение заголовков «Кредит/рассрочка:» и «Другие способы оплаты». Если вы не используете рассрочки или другие способы оплаты, то Геткурс всё равно покажет эти заголовки, а вариантов там не будет. Поэтому с помощью этих меременных можно заголовки скрыть. Установите значение переменных `none`, чтобы скрыть отображение и `block`, чтобы вывести заголовки.

### 4. Изображения кнопок Pay-сервисов

Находятся в папке `checkout_page`.&#x20;

Перейдите в файловое хранилище вашей школы: нажмите на аватар в главном меню — Файловое хранилище.

Нажмите кнопку «Загрузить файлы». Выберите все три изображения и нажмите «Загрузить». После загрузки в правом верхнем углу вы увидите следующее:

<figure><img src="/files/YeL8jHw9OgpGLVY5SBFQ" alt=""><figcaption></figcaption></figure>

Нажмите на все три ссылки загруженных файлов. В новых вкладках откроются страницы загруженных изображений.

Вам нужно скопировать ссылки на файлы и заменить их в переменных. Нажмите «Копировать ссылку» и вернитесь к редактированию стилей страницы оплаты

<figure><img src="/files/KFaUS7BQEsogt8hm0ZpV" alt=""><figcaption></figcaption></figure>

Вам нужно поочерёдно заменить все три ссылки:

<figure><img src="/files/KOGtWPzRc8nCysO5pXAn" alt=""><figcaption></figcaption></figure>

Сохраните изменения. Страница оплаты готова!

### Рекомендации

Если используете модификаторы в предложениях, рекомендую сузить колонку с информацией о покупателе. Это позволит пунктам модификаторов вмещаться и не нарушать вёрстку.

Выделите колонку с информацией о покупателе и измените настройку «Ширина блока» на 4 / 12:

<figure><img src="/files/UKl79cp60q86HaofoX5f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/l4n9r704bXzeUAqtNWyY" alt=""><figcaption></figcaption></figure>

### Использование логотипов банков вместо иконки российского флага

В наборе стилей предусмотрена возможность вывода логотипов российских банков: Сбер, Т-Банк, ВТБ, Альфа Банк.

Я сознательно оставил по умолчанию иконки российского флага, т. к. при использовании иконок банков, у людей возникало ощущение, что оплата может быть произведена только картой этого банка. Чтобы избежать лишних вопросов и падения конверсии, иконки банков закомментированы.

Но также возникали ситуации, когда люди спрашивали: «А в чём разница между этими способами оплаты? Ведь везде написано одно и то же!»

Поэтому, я оставил решение за вами. Если хотите выводить способы оплаты с иконками банков, в стилях найдите строку 550. С неё начинается блок стилей, отвечающий за иконки. Раскомментируйте блок, удалив символы `/* */`:

<figure><img src="/files/oywlqHvNSfWwrscJ0pVG" alt=""><figcaption></figcaption></figure>

Теперь способы оплаты картой будут отображаться с иконками соответствующих банков, через которые осуществляется оплата:

<figure><img src="/files/og9R14uvytGuJm76KtwG" alt=""><figcaption></figcaption></figure>

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