Виджет ЮKassa: внешний вид платежной формы

Внешний вид платежной формы

В платежной форме виджета вы можете изменить язык, на котором отображаются тексты, и настроить цвета элементов интерфейса.

Настройка языка

По умолчанию тексты в платежной форме отображаются на русском. Вы можете изменить язык интерфейса на английский: при создании платежа передайте в confirmation параметр locale со значением en_US.

cURL
PHP
Python
curl https://api.yookassa.ru/v3/payments \
  -X POST \
  -u <Идентификатор магазина>:<Секретный ключ> \
  -H 'Idempotence-Key: <Ключ идемпотентности>' \
  -H 'Content-Type: application/json' \
  -d '{
        "amount": {
          "value": "2.00",
          "currency": "RUB"
        },
        "confirmation": {
          "type": "embedded",
          "locale": "en_US"
        },
        "capture": true,
        "description": "Заказ №72"
      }'

Управление цветовой схемой интерфейса

По умолчанию в виджете белая платежная форма, а для важных элементов, например кнопки Заплатить, используется акцентный желтый цвет. Такой дизайн помогает пользователю сфокусироваться на главном — какой способ оплаты он выбрал, куда вводит данные и как перейти к оплате.

Виджет можно адаптировать под любой дизайн. Для настройки достаточно задать всего один или два цвета — остальные цвета виджет подберет сам. При необходимости вы можете откорректировать автоматически рассчитанные цвета, передав дополнительные параметры.

Примеры настройки цветовой схемы

Настройка цветовой схемы

Цветовая схема задается при инициализации виджета с помощью объекта colors, переданного в объекте customization. В объекте colors задаются параметры, влияющие на цвета элементов интерфейса.

Можно задать максимум шесть параметров: два базовых и четыре дополнительных. Каждый из базовых параметров отвечает за определенную группу элементов интерфейса. Если передать такой параметр, виджет на его основе рассчитает все нужные цвета. При необходимости вы можете уточнить автоматически подобранные цвета с помощью дополнительных параметров.

Значения цветов необходимо задавать в шестнадцатеричном представлении (HEX), иначе виджет проигнорирует настройки.

Полезное для настройки цветовой схемы:

Быстрый старт

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

Быстрый старт: кнопка Заплатить

Шаг 1. Добавьте в скрипт для инициализации виджета объект customization с объектом colors и параметром control_primary.

HTML

<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>


<div id="payment-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
            control_primary: '#00BF96' //Значение цвета в HEX
        }
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>

Шаг 2. Создайте платеж для тестового магазина и инициализируйте виджет.

Пример настроек из Быстрого старта (кнопка Заплатить)

Готово! Кнопка Заплатить и другие акцентные элементы изменили свой цвет.

Это самый простой способ изменить цвет акцентных элементов. Вы можете выбрать другой вариант настройки, если хотите уточнить автоматически рассчитанные цвета или изменить другие элементы интерфейса.

Быстрый старт: вся платежная форма

Шаг 1. Добавьте в скрипт для инициализации виджета объект customization с объектом colors и параметрами control_primary и background.

HTML

<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>


<div id="payment-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные, кроме объекта customization.
const checkout = new window.YooMoneyCheckoutWidget({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от ЮKassa
    return_url: 'https://example.com', //Ссылка на страницу завершения оплаты

    //Настройка виджета
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
            control_primary: '#00BF96', //Значение цвета в HEX

            //Цвет платежной формы и ее элементов
            background: '#F2F3F5' //Значение цвета в HEX
        }
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>

Шаг 2. Создайте платеж для тестового магазина и инициализируйте виджет.

Пример настроек из Быстрого старта (вся платежная форма)

Готово! Платежная форма и кнопка Заплатить изменили свои цвета.

Это самый простой способ изменить цвета всей платежной формы. Вы можете выбрать другой вариант настройки, если хотите уточнить автоматически рассчитанные цвета или изменить другие элементы интерфейса.

Варианты настройки цветовой схемы

Количество параметров, передаваемых в colors, зависит от того, что вы хотите изменить:

Только акцентные элементы: белая платежная форма подходит вашему сайту, а желтые акцентные элементы — нет.
Только платежная форма: желтые акценты устраивают, но белая форма не подходит (например, у вас на сайте есть темная тема).
Акцентные элементы и платежная форма: цвета по умолчанию не подходят совсем, нужно поменять цвета всех элементов.
Только детали: всё в целом устраивает, но нужно изменить какие-то детали, например цвет границ платежной формы.

Справочник всех параметров объекта colors

Варианты настройки: только акцентные элементы

Акцентные элементы в виджете — это то, что помогает сфокусироваться и призывает к действию: кнопка Заплатить, выбранные переключатели, опции, граница выбранного текстового поля.

На цвет акцентных элементов влияют два параметра:

control_primary (базовый цвет) — цвет фона кнопки Заплатить и других акцентных элементов.
control_primary_content — цвет текста в кнопке и содержимого акцентных переключателей и опций (например, выставленный флажок).

Чтобы изменить цвет акцентных элементов, достаточно передать только control_primary. В этом случае виджет автоматически выберет в качестве цвета текста либо черный, либо белый цвет (наиболее контрастный к control_primary).

Параметры, определяющие цвет акцентных элементов — экран выбора способа оплаты

Параметры, определяющие цвет акцентных элементов — экран ввода данных

Рекомендуется для control_primary выбирать цвет, привлекающий внимание, для control_primary_content — контрастный цвет, который будет читаться на фоне базового цвета.

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

Шаг 1. Добавьте в скрипт для инициализации виджета объект customization с объектом colors и параметром control_primary.

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          control_primary: '#00BF96' // Базовый цвет кнопки Заплатить и других акцентных элементов
          // Цвет текста кнопки Заплатить, цвет флажка в переключателе подберется автоматически
        }
    },

Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.

Шаг 3. При необходимости уточните автоматически рассчитанный цвет текста в кнопке Заплатить. Для этого добавьте в скрипт параметр control_primary_content с нужным цветом и инициализируйте виджет заново (или обновите страницу оплаты).

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          control_primary: '#00BF96', // Базовый цвет кнопки Заплатить и других акцентных элементов
          control_primary_content: '#FFFFFF' // Цвет текста кнопки Заплатить, цвет флажка в переключателе
        }
    },

Пример настройки цветов акцентных элементов (control_primary и control_primary_content)

Готово! Виджет можно использовать для приема платежей от ваших пользователей.

Вернуться к выбору варианта настройки

Варианты настройки: только платежная форма

Платежная форма состоит из блоков способов оплаты (кошелек ЮMoney, банковская карта, SberPay, Mir Pay), сообщения о принятии оферты и логотипа ЮKassa.

Цвет фона, на котором располагаются элементы, — это цвет страницы оплаты или фона контейнера, в котором размещен виджет (вы изменяете его самостоятельно на странице оплаты). Кнопка Заплатить — акцентный элемент, который настраивается отдельно. На все остальные элементы влияют четыре параметра:

background (базовый цвет) — цвет фона блоков способов оплаты, цвет сообщений об ошибках и подсказок.
text — цвет текста.
border — цвет границ и разделителей.
control_secondary — цвет неакцентных элементов интерфейса.

Чтобы изменить цвет платежной формы, достаточно передать только background. В этом случае цвет границ, текста и неакцентных элементов виджет рассчитает автоматически.

Параметры, определяющие цвет формы — экран выбора способа оплаты

Параметры, определяющие цвет формы — экран ввода данных

Рекомендуется для background выбирать цвет, близкий к цвету фона контейнера, в котором размещен виджет, для text — контрастный цвет, который будет читаться на фоне платежной формы, на фоне неакцентных элементов и на фоне контейнера. Остальные цвета рекомендуется подбирать так, чтобы они хорошо смотрелись на фоне background.

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

Шаг 1. Добавьте в скрипт для инициализации виджета объект customization с объектом colors и параметром background.

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5' // Цвет фона платежной формы
          //Цвет текста, границ, неакцентных элементов рассчитается автоматически
        }
    },

Шаг 3. При необходимости уточните автоматически рассчитанные цвета текстов, границ или неакцентных элементов. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5', // Цвет фона платежной формы
          text: '#222222', // Цвет текста
          border: '#D4D4D4', // Цвет границ и разделителей
          control_secondary: '#AFBDCA' // Цвет неакцентных элементов интерфейса
        }
    },

Пример настройки цветов платежной формы (background, text, border, control_secondary)

Готово! Виджет можно использовать для приема платежей от ваших пользователей.

Вернуться к выбору варианта настройки

Варианты настройки: акцентные элементы и платежная форма

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

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

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#0D182F',  // Цвет фона платежной формы
          control_primary: '#00BF96' // Цвет кнопки Заплатить и других акцентных элементов
        }
    },

Шаг 3. При необходимости уточните автоматически рассчитанные цвета. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#0D182F', // Цвет фона платежной формы
          control_primary: '#00BF96', // Цвет кнопки Заплатить и других акцентных элементов
          control_primary_content: '#FFFFFF', // Цвет текста кнопки Заплатить
          control_secondary: '#366093', // Цвет неакцентных элементов интерфейса
          border: '#244166', // Цвет границ и разделителей
          text: '#DBDCE0' // Цвет текста
        }
    },

Пример настройки всех цветов (все параметры). Фон контейнера задается отдельно

Готово! Виджет можно использовать для приема платежей от ваших пользователей.

Вернуться к выбору варианта настройки

Варианты настройки: только детали

Вы можете задать только дополнительные цвета, например только цвет границ. Если нужно изменить базовые цвета, используйте инструкции по настройке акцентных элементов и платежной формы.

Рекомендуемый порядок настройки:

Шаг 1. Добавьте в скрипт для инициализации виджета объект customization с объектом colors и нужными вам параметрами.

Готово! Виджет можно использовать для приема платежей от ваших пользователей.

Пример точечной настройки виджета

JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          control_primary_content: '#0070F0', // Цвет текста кнопки Заплатить
          border: '#00BF96' // Цвет границ и разделителей
        }
    },

Пример точечной настройки виджета (control_primary_content и border)

Вернуться к выбору варианта настройки

Что почитать еще

Checkout.js Справочник виджета Типовые сценарии интеграции виджета