Кнопки оплаты Яндекс Пэй
Примечание
Вы находитесь в разделе, посвященном Web SDK. Если вы используете мобильные устройства, перейдите в соответствующий раздел.
Что такое кнопка оплаты
Кнопка оплаты Яндекс Пэй позволяет пользователю совершить оплату на вашем сайте в один клик. Вид кнопки зависит от доступных для использования методов оплаты, которые указаны в объекте PaymentData в availablePaymentMethods при подключении формы оплаты:
- доступен Яндекс Пэй со Сплитом:
- доступен только Сплит:
Для кнопки можно настроить внешний вид и поведение.
Интерактивное демо
Посмотрите, какие кнопки имеются в арсенале Яндекс Пэй, и как внешний вид зависит от параметров.
Важно
Внешний вид кнопки Яндекс Пэй может также меняться в зависимости от текущего браузера или авторизации на ya.ru.
Параметры кнопки
|
Параметр |
Значение |
Внешний вид |
|
Тип |
||
|
|
|
|
|
Вид |
||
|
|
|
|
|
|
|
|
|
|
|
|
|
Размер |
||
|
|
|
Параметр включает фиксированный размер кнопки Яндекс Пэй: |
|
|
|
Параметр включает адаптивный размер кнопки Яндекс Пэй:
|
Работа с кнопкой
Примечание
Перед настройкой кнопки оплаты, вам нужно подключить 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>