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

{% 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 Модуль. При использовании интеграций со сторонними платёжными системами, иконки банков не отображаются.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tiil.ru/nabor-bazovykh-stilei-dlya-getcourse/ustanovka-nabora-stilei/ustanovka-stilei-na-stranicu-oplaty-zakaza.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.