> 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Fo6TNyzLANESYDjWWX8uK%2Fimage.png?alt=media&amp;token=3a44c912-fb2f-436d-85e5-5fb893ac807d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FfRDZnok6ebfEjJ6cE3wr%2Fimage.png?alt=media&amp;token=8105b90c-5d91-4d0a-a4f0-1331cde8f5d7" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FredcG5kV1fYPJ6IcJq2n%2Fimage.png?alt=media&amp;token=2ec485e2-155b-4391-bcbe-91ffeec386e6" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F3WbTn9QobR7XThefSB4i%2Fimage.png?alt=media&amp;token=c03370cd-624f-401a-b3fc-c73aa9f0e414" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F2UPX2utSlxXOwEOIai3A%2Fimage.png?alt=media&amp;token=625add7b-15e8-45be-8a02-0f39f5dd714e" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2Fn88lkKPiIfprDuMqwdWb%2Fimage.png?alt=media&amp;token=b95f52f5-706c-4259-ae94-66e7936930c4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F6mojXDT0oSs3xVDoF93R%2Fimage.png?alt=media&amp;token=1ea00cf2-d6a1-4986-b7a0-d95b9f6d9a8a" 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="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FvfUHQAstPEwm0RVpETfY%2Fimage.png?alt=media&amp;token=485fc4ce-592e-4540-8dc1-56ab10d3e045" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FuVRj2sw4BjQocRcMKrxc%2Fimage.png?alt=media&amp;token=57c52474-c71f-422e-a3ad-3ea636b81b88" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FypPLxE33KBgSHLfsVMaa%2Fimage.png?alt=media&amp;token=8ea0a5c3-b01f-4825-b47e-c4ff8040f43b" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FOhbrUqlnT7XMBGRqOxqK%2Fimage.png?alt=media&amp;token=0c0e7f2f-c692-4261-b609-68a7dce8e603" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FxVBwcVXExhRV3q1HoK5G%2Fimage.png?alt=media&amp;token=d83868f6-b020-41ad-972f-799a355ab99b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F0jf9TsYmqF7rLM88e97U%2Fimage.png?alt=media&amp;token=1cff4de0-6b4c-41a7-bf58-fec7e707ecf6" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FM9bMZEMH1VgqZs6Wntg7%2Fimage.png?alt=media&amp;token=63554d50-05df-4039-aa5d-f3b415540588" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FRqP8kgeoT7iyY0PmMjOJ%2Fimage.png?alt=media&amp;token=2b830533-7beb-4402-8a22-465e52a36514" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2F1doaObNVPIx72lbwTM5K%2Fimage.png?alt=media&amp;token=ae26cfe3-97e1-44c6-a1f1-f2feda9e2971" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3883666857-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRlJKxvj4FCaidnHvYAzl%2Fuploads%2FI83mamf9LQcn63Lyetlr%2Fimage.png?alt=media&amp;token=0af0684c-4991-4c95-b331-20e3a7a38457" alt=""><figcaption></figcaption></figure>

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