Кнопки оплаты Яндекс Пэй
Примечание
Вы находитесь в разделе, посвященном Web SDK. Если вы используете мобильные устройства, перейдите в соответствующий раздел.
Что такое кнопка оплаты
Кнопка оплаты Яндекс Пэй позволяет пользователю совершить оплату на вашем сайте в один клик. Вид кнопки зависит от доступных для использования методов оплаты, которые указаны в объекте PaymentData в availablePaymentMethods при подключении формы оплаты:
- доступен Яндекс Пэй со Сплитом:
- доступен только Сплит:
Для кнопки можно настроить внешний вид и поведение.
Интерактивное демо
Посмотрите, какие кнопки имеются в арсенале Яндекс Пэй, и как внешний вид зависит от параметров.
Важно
Внешний вид кнопки Яндекс Пэй может также меняться в зависимости от текущего браузера или авторизации на ya.ru.
Параметры кнопки
| Параметр | Значение | Внешний вид |
|---|---|---|
| Текст | ||
type |
YaPay.ButtonType.Pay |
|
| Вид | ||
theme |
YaPay.ButtonTheme.Black |
|
theme |
YaPay.ButtonTheme.White |
|
theme |
YaPay.ButtonTheme.WhiteOutlined |
|
| Размер | ||
width |
YaPay.ButtonWidth.Auto |
Параметр включает фиксированный размер кнопки Яндекс Пэй: |
width |
YaPay.ButtonWidth.Max |
Параметр включает адаптивный размер кнопки Яндекс Пэй:    |
Работа с кнопкой
Примечание
Перед настройкой кнопки оплаты, вам нужно подключить SDK.
Подключение в DOM
paymentSession.mountButton(
document.querySelector('<selector>'),
{
type: YaPay.ButtonType.Pay,
theme: YaPay.ButtonTheme.Black,
width: YaPay.ButtonWidth.Auto,
}
)
Удаление из DOM
paymentSession.unmountButton(
document.querySelector('<selector>'),
)
Дополнительная кастомизация внешнего вида
Поменять высоту кнопки и ее скругление можно с помощью CSS стилей.
Совет
Чтобы кнопка стала адаптивной и растягивалась под размер родительского контейнера, укажите для параметра width значение YaPay.ButtonWidth.Max.
Вы также можете явно указать ее ширину через CSS.
<style>
.ya-pay-button {
height: 40px !important;
border-radius: 10px !important;
}
</style>