Кнопки оплаты Yandex Pay

Кнопка оплаты Yandex Pay позволяет пользователю совершить оплату на вашем сайте в одно нажатие или оформить заказ с использованием своих данных.

Для кнопки оплаты можно настроить внешний вид и поведение.

Работа с кнопкой

Подключение в DOM

paymentSession.mountButton(
    document.querySelector('<selector>'),
    {
        type: YaPay.ButtonType.Pay,
        theme: YaPay.ButtonTheme.Black,
        width: YaPay.ButtonWidth.Auto,
    }
)

Удаление из DOM

paymentSession.unmountButton(
    document.querySelector('<selector>'),
)

Параметры кнопки

Параметр Значение Внешний вид
Текст
type YaPay.ButtonType.Pay Pay Button
Вид
theme YaPay.ButtonTheme.Black Black Simple Button
Black Personalized Button
theme YaPay.ButtonTheme.White White Simple Button
White Personalized Button
theme YaPay.ButtonTheme.WhiteOutline WhiteOutline Simple Button
WhiteOutline Personalized Button
Размер
width YaPay.ButtonWidth.Auto Данный параметр включает фиксированный размер кнопки Yandex Pay
Width Auto Button
width YaPay.ButtonWidth.Max Даннный параметр включает aдаптивный размер кнопки Yandex Pay
Width L Button
Width M Button
Width S Button
Width XS Button

Дополнительная кастомизация внешнего вида

Поменять высоту кнопки и ее скругление можно с помощью CSS стилей.

Совет

Чтобы кнопка стала адаптивной и растягивалась под размер родительского контейнера, укажите для параметра width значение YaPay.ButtonWidth.Max.
Вы также можете явно указать ее ширину через CSS.

<style>
  .ya-pay-button {
    height: 40px !important;
    border-radius: 10px !important;
  }
</style>

Пример

Важно

Внешний вид кнопки Yandex Pay может меняться в зависимости от текущего браузера, авторизации на ya.ru, наличия аватара или привязанной банковской карты.

В этой статье: