В платежной форме виджета вы можете изменить язык, на котором отображаются тексты, и настроить цвета элементов интерфейса.
По умолчанию тексты в платежной форме отображаются на русском. Вы можете изменить язык интерфейса на английский: при создании платежа передайте в
confirmation
параметр locale
со значением en_US
.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
задаются параметры, влияющие на цвета элементов интерфейса.Можно задать максимум шесть параметров: два базовых и четыре дополнительных. Каждый из базовых параметров отвечает за определенную группу элементов интерфейса. Если передать такой параметр, виджет на его основе рассчитает все нужные цвета. При необходимости вы можете уточнить автоматически подобранные цвета с помощью дополнительных параметров.
Полезное для настройки цветовой схемы:
Выберите, что вы хотите попробовать изменить: цвет кнопки Заплатить или цвет всей формы.
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом colors
и параметром control_primary
.<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
.<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
, зависит от того, что вы хотите изменить:- Только акцентные элементы: белая платежная форма подходит вашему сайту, а желтые акцентные элементы — нет.
- Только платежная форма: желтые акценты устраивают, но белая форма не подходит (например, у вас на сайте есть темная тема).
- Акцентные элементы и платежная форма: цвета по умолчанию не подходят совсем, нужно поменять цвета всех элементов.
- Только детали: всё в целом устраивает, но нужно изменить какие-то детали, например цвет границ платежной формы.
Акцентные элементы в виджете — это то, что помогает сфокусироваться и призывает к действию: кнопка Заплатить, выбранные переключатели, опции, граница выбранного текстового поля.
На цвет акцентных элементов влияют два параметра:
control_primary
(базовый цвет) — цвет фона кнопки Заплатить и других акцентных элементов.control_primary_content
— цвет текста в кнопке и содержимого акцентных переключателей и опций (например, выставленный флажок).
Параметры, определяющие цвет акцентных элементов — экран выбора способа оплаты
Параметры, определяющие цвет акцентных элементов — экран ввода данных
Рекомендуется для
control_primary
выбирать цвет, привлекающий внимание, для control_primary_content
— контрастный цвет, который будет читаться на фоне базового цвета.Рекомендуется начать настройку с базового цвета, а дополнительный цвет использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом colors
и параметром control_primary
.customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { control_primary: '#00BF96' // Базовый цвет кнопки Заплатить и других акцентных элементов // Цвет текста кнопки Заплатить, цвет флажка в переключателе подберется автоматически } },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанный цвет текста в кнопке Заплатить. Для этого добавьте в скрипт параметр
control_primary_content
с нужным цветом и инициализируйте виджет заново (или обновите страницу оплаты).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
выбирать цвет, близкий к цвету фона контейнера, в котором размещен виджет, для text
— контрастный цвет, который будет читаться на фоне платежной формы, на фоне неакцентных элементов и на фоне контейнера. Остальные цвета рекомендуется подбирать так, чтобы они хорошо смотрелись на фоне background
.Рекомендуется начать настройку с базового цвета, а дополнительные цвета использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом colors
и параметром background
.customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { background: '#F2F3F5' // Цвет фона платежной формы //Цвет текста, границ, неакцентных элементов рассчитается автоматически } },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанные цвета текстов, границ или неакцентных элементов. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).
customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { background: '#F2F3F5', // Цвет фона платежной формы text: '#222222', // Цвет текста border: '#D4D4D4', // Цвет границ и разделителей control_secondary: '#AFBDCA' // Цвет неакцентных элементов интерфейса } },
Пример настройки цветов платежной формы (background, text, border, control_secondary)
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
Если вы хотите поменять все цвета виджета, используйте одновременно параметры для изменения акцентных элементов и платежной формы.
Рекомендуется начать настройку с базовых цветов, а дополнительные цвета использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом colors
и параметрами control_primary
и background
.customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { background: '#0D182F', // Цвет фона платежной формы control_primary: '#00BF96' // Цвет кнопки Заплатить и других акцентных элементов } },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанные цвета. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).
customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { background: '#0D182F', // Цвет фона платежной формы control_primary: '#00BF96', // Цвет кнопки Заплатить и других акцентных элементов control_primary_content: '#FFFFFF', // Цвет текста кнопки Заплатить control_secondary: '#366093', // Цвет неакцентных элементов интерфейса border: '#244166', // Цвет границ и разделителей text: '#DBDCE0' // Цвет текста } },
Пример настройки всех цветов (все параметры). Фон контейнера задается отдельно
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
Вы можете задать только дополнительные цвета, например только цвет границ. Если нужно изменить базовые цвета, используйте инструкции по настройке акцентных элементов и платежной формы.
Рекомендуемый порядок настройки:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом colors
и нужными вам параметрами.Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
Пример точечной настройки виджета
customization: { //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX colors: { control_primary_content: '#0070F0', // Цвет текста кнопки Заплатить border: '#00BF96' // Цвет границ и разделителей } },
Пример точечной настройки виджета (control_primary_content и border)
Checkout.jsСправочник виджетаТиповые сценарии интеграции виджета