Внешний вид платежной формы
В платежной форме виджета вы можете изменить язык, на котором отображаются тексты, и настроить цвета элементов интерфейса.
 
Настройка языка
По умолчанию тексты в платежной форме отображаются на русском. Чтобы изменить язык интерфейса на английский или немецкий, при создании платежа передайте в 
confirmation
параметр
locale
со значением
en_US
или
de_DE
соответственно.
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
и параметром
controlPrimary
.
HTML
<!--Подключение библиотеки-->
<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>

<!--HTML-элемент, в котором будет отображаться платежная форма-->
<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: {
            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
            controlPrimary: '#00BF96' //Значение цвета в HEX
        }
    },
    error_callback: function(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>
Шаг 2. Создайте платеж для тестового магазина и инициализируйте виджет.
Пример настроек из Быстрого старта (кнопка Заплатить)
Готово! Кнопка Заплатить и другие акцентные элементы изменили свой цвет.
Это самый простой способ изменить цвет акцентных элементов. Вы можете выбрать другой вариант настройки, если хотите уточнить автоматически рассчитанные цвета или изменить другие элементы интерфейса.
 
Быстрый старт: вся платежная форма
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом
colors
и параметрами
controlPrimary
и 
background
.
HTML
<!--Подключение библиотеки-->
<script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>

<!--HTML-элемент, в котором будет отображаться платежная форма-->
<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: {
            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
            controlPrimary: '#00BF96', //Значение цвета в HEX

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

//Отображение платежной формы в контейнере
checkout.render('payment-form');
</script>
Шаг 2. Создайте платеж для тестового магазина и инициализируйте виджет.
Пример настроек из Быстрого старта (вся платежная форма)
Готово! Платежная форма и кнопка Заплатить изменили свои цвета.
Это самый простой способ изменить цвета всей платежной формы. Вы можете выбрать другой вариант настройки, если хотите уточнить автоматически рассчитанные цвета или изменить другие элементы интерфейса.
 
Варианты настройки цветовой схемы
Количество параметров, передаваемых в 
colors
, зависит от того, что вы хотите изменить:
 
Варианты настройки: только акцентные элементы
Акцентные элементы в виджете — это то, что помогает сфокусироваться и призывает к действию: кнопка Заплатить, выбранные переключатели, опции, граница выбранного текстового поля.
На цвет акцентных элементов влияют два параметра:
  • controlPrimary
    (базовый цвет) — цвет фона кнопки Заплатить и других акцентных элементов.
  • controlPrimaryContent
     — цвет текста в кнопке и содержимого акцентных переключателей и опций (например, выставленный флажок).
Чтобы изменить цвет акцентных элементов, достаточно передать только
controlPrimary
. В этом случае виджет автоматически выберет в качестве цвета текста либо черный, либо белый цвет (наиболее контрастный к 
controlPrimary
).
Параметры, определяющие цвет акцентных элементов — экран выбора способа оплаты
Параметры, определяющие цвет акцентных элементов — экран ввода данных
Рекомендуется для
controlPrimary
выбирать цвет, привлекающий внимание, для
controlPrimaryContent
 — контрастный цвет, который будет читаться на фоне базового цвета.
Рекомендуется начать настройку с базового цвета, а дополнительный цвет использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом
colors
и параметром
controlPrimary
.
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          controlPrimary: '#00BF96' // Базовый цвет кнопки Заплатить и других акцентных элементов
          // Цвет текста кнопки Заплатить, цвет флажка в переключателе подберется автоматически
        }
    },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанный цвет текста в кнопке Заплатить. Для этого добавьте в скрипт параметр
controlPrimaryContent
с нужным цветом и инициализируйте виджет заново (или обновите страницу оплаты).
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          controlPrimary: '#00BF96', // Базовый цвет кнопки Заплатить и других акцентных элементов
          controlPrimaryContent: '#FFFFFF' // Цвет текста кнопки Заплатить, цвет флажка в переключателе
        }
    },
Пример настройки цветов акцентных элементов (controlPrimary и controlPrimaryContent)
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
 
Варианты настройки: только платежная форма
Платежная форма состоит из блоков способов оплаты (кошелек ЮMoney, банковская карта, Сбербанк Онлайн), кнопок Apple Pay, Google Pay, сообщения о принятии оферты и логотипа ЮKassa.
Цвет фона, на котором располагаются элементы, — это цвет страницы оплаты или фона контейнера, в котором размещен виджет (вы изменяете его самостоятельно на странице оплаты). Кнопка Заплатить — акцентный элемент, который настраивается отдельно. На все остальные элементы влияют четыре параметра:
  • background
    (базовый цвет) — цвет фона блоков способов оплаты, цвет сообщений об ошибках и подсказок, внешний вид кнопок Apple Pay, Google Pay и логотипов.
  • text
     — цвет текста.
  • border
     — цвет границ и разделителей.
  • controlSecondary
     — цвет неакцентных элементов интерфейса.
Чтобы изменить цвет платежной формы, достаточно передать только
background
. В этом случае цвет границ, текста и неакцентных элементов виджет рассчитает автоматически.
Параметры, определяющие цвет формы — экран выбора способа оплаты
Параметры, определяющие цвет формы — экран ввода данных
Рекомендуется для
background
выбирать цвет, близкий к цвету фона контейнера, в котором размещен виджет, для
text
 — контрастный цвет, который будет читаться на фоне платежной формы, на фоне неакцентных элементов и на фоне контейнера. Остальные цвета рекомендуется подбирать так, чтобы они хорошо смотрелись на фоне
background
.
Кнопки Apple Pay и Google Pay и логотип ЮKassa могут быть только черными или белыми. Внешний вид зависит от параметра
background
. Остальные параметры на них не влияют.
Рекомендуется начать настройку с базового цвета, а дополнительные цвета использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом
colors
и параметром
background
.
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5' // Цвет фона платежной формы
          //Цвет текста, границ, неакцентных элементов рассчитается автоматически
        }
    },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанные цвета текстов, границ или неакцентных элементов. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#F2F3F5', // Цвет фона платежной формы
          text: '#222222', // Цвет текста
          border: '#D4D4D4', // Цвет границ и разделителей
          controlSecondary: '#AFBDCA' // Цвет неакцентных элементов интерфейса
        }
    },
Пример настройки цветов платежной формы (background, text, border, controlSecondary)
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
 
Варианты настройки: акцентные элементы и платежная форма
Если вы хотите поменять все цвета виджета, используйте одновременно параметры для изменения акцентных элементов и платежной формы.
Рекомендуется начать настройку с базовых цветов, а дополнительные цвета использовать при необходимости:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом
colors
и параметрами
controlPrimary
и 
background
.
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#0D182F',  // Цвет фона платежной формы
          controlPrimary: '#00BF96' // Цвет кнопки Заплатить и других акцентных элементов
        }
    },
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Шаг 3. При необходимости уточните автоматически рассчитанные цвета. Для этого добавьте в скрипт дополнительные параметры с нужными цветами и инициализируйте виджет заново (или обновите страницу оплаты).
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          background: '#0D182F', // Цвет фона платежной формы
          controlPrimary: '#00BF96', // Цвет кнопки Заплатить и других акцентных элементов
          controlPrimaryContent: '#FFFFFF', // Цвет текста кнопки Заплатить
          controlSecondary: '#366093', // Цвет неакцентных элементов интерфейса
          border: '#244166', // Цвет границ и разделителей
          text: '#DBDCE0' // Цвет текста
        }
    },
Пример настройки всех цветов (все параметры). Фон контейнера задается отдельно
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
 
Варианты настройки: только детали
Вы можете задать только дополнительные цвета, например только цвет границ. Если нужно изменить базовые цвета, используйте инструкции по настройке акцентных элементов и платежной формы.
Рекомендуемый порядок настройки:
Шаг 1. Добавьте в скрипт для инициализации виджета объект
customization
с объектом
colors
и нужными вам параметрами.
Шаг 2. Создайте платеж для тестового магазина, инициализируйте виджет и проверьте, как смотрится платежная форма.
Готово! Виджет можно использовать для приема платежей от ваших пользователей.
Пример точечной настройки виджета
JavaScript
    customization: {
        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
        colors: {
          controlPrimaryContent: '#0070F0', // Цвет текста кнопки Заплатить
          border: '#00BF96' // Цвет границ и разделителей
        }
    },
Пример точечной настройки виджета (controlPrimaryContent и border)

Есть вопросы или замечания по документации?

Можем созвониться и обсудить их лично: мы поможем вам разобраться, а вы нам — понять, что тут нужно улучшить. Для этого оставьте свои контакты и выберите время.
Да, хочу обсудить
 
Что почитать еще
Checkout.jsСправочник виджетаТиповые сценарии интеграции виджета