По умолчанию кнопка выглядит так:
PayQR предоставляет способ изменения вида кнопки. Таким образом вы получаете возможность отображать кнопку в дизайне наиболее приближенном к кнопкам вашего магазина.
Дизайн кнопки по умолчанию устанавливается с помощью класса кнопки "payqr-button". Существует возможность модифицировать вид кнопки с помощью классов-модификаторов, располагаемых после класса payqr-button.
Также можно поменять размер кнопки с помощью указания стиля style="width:200px;height:50px"
Пример кода кнопки с модифицированным видом
Предоставляется несколько групп модификаторов, меняющих вид кнопки
Рекомендуется вставлять только один модификатор из каждой группы. Если же будет вставлено несколько модификаторов из одной группы, то применится только последний. Но при этом скрипт всё равно будет обрабатывать все указанные модификаторы, что может сказаться на производительности страницы.
PayQR оcтавляет за собой право изменять дизайн кнопки по умолчанию. Если же вы хотите зафиксировать параметр кнопки, оградив себя от изменений дизайна по умолчанию - просто укажите конкретные модификаторы и ваша кнопка в этом случае не изменится.
Например, если вам необходимо всегда быть уверенным, что кнопка будет зелёной, просто укажите payqr-button_green
| Класс кнопки | Кнопка |
|---|---|
| payqr-button_green | |
| payqr-button_blue | |
| payqr-button_orange | |
| payqr-button_red |
| Класс кнопки | Кнопка |
|---|---|
| Без модификатора (По умолчанию у кнопки острые углы) | |
| payqr-button_rude | |
| payqr-button_soft | |
| payqr-button_sleek | |
| payqr-button_oval |
| Класс кнопки | Кнопка |
|---|---|
| Без модификатора (По умолчанию градиент на кнопке не используется) | |
| payqr-button_gradient |
| Класс кнопки | Кнопка |
|---|---|
| payqr-button_shadow | |
| Без модификатора (По умолчанию тень на кнопке не используется) |
| Класс кнопки | Кнопка |
|---|---|
| Без модификатора (По умолчанию текст на кнопке начинается с прописной буквы, дальше все буквы используются как строчные) | |
| payqr-button_uppercase |
| Класс кнопки | Кнопка |
|---|---|
| Без модификатора (По умолчанию текст на кнопке размещен как Normal) | |
| payqr-button_bold |
| Класс кнопки | Кнопка |
|---|---|
| Без модификатора (Размер текста по умолчанию составляет 14px) | |
| payqr-button_large | |
| payqr-button_small |
Размер кнопки может быть изменён через стиль style="width:400px;height:90px"
Также получателям денежных средств типа «Интернет-магазин или онлайн-сервис» предоставляется возможность отключить влияние скрипта PayQR на внешний вид объекта button с значением payqr_button в параметре class (то есть влияние на внешний вид кнопки PayQR) через использование значения payqr-button_idkfa в параметре class кода кнопки PayQR. С помощью модификатора payqr-button_idkfa получатель денежных средств отключает скрипт PayQRв области построения внешнего вида кнопок PayQR и может как угодно менять внешний вид кнопок PayQR самостоятельно, сохраняя: A) фирменный текст «Купить быстрее» в кнопке(или «Оплатить быстрее»для сценария оплаты) и B) фирменный элемент PayQR, используемый платежным сервисом PayQR на момент реализации данного функционала получателем денежных средств. Если будет задействован модификатор payqr-button_idkfa в коде той или иной кнопки PayQR, то скрипт PayQR вообще не будет работать с внешним видом такой кнопки и официальные модификаторы внешнего вида PayQR, описанные выше, тоже будут игнорироваться.