Библиотека виджетов методов оплаты
Библиотека для отображения виджетов методов оплаты на вашем сайте
Что такое виджеты методов оплаты?
Это библиотека с помощью которой можно отобразить виджеты оплаты:
- Apple Pay (без прямой интеграции с Apple)
- Privat pay
- QR в корзине на вашем сайте
Как работают виджеты методов оплаты?
- Сформируйте необходимые параметры согласно документации.
- Установите один или несколько виджетов методов оплаты на страницу вашего сайта.
- Клиент оплачивает одним из выбранных способов Apple Pay, Privat pay, QR находясь на вашем сайте.
- По результату - вы получаете ответ от LiqPay о статусе платежа.
Интеграция
- Подключить Script:
<script type="text/javascript" src="https://static.liqpay.ua/elements/customElements.js"></script> - Использовать доступные веб-компоненты: <lp-provider></lp-provider>, <lp-apple-pay></lp-apple-pay>, <lp-privat24-pay></lp-privat24-pay>, <lp-qr></lp-qr>
Необходимые параметры:
Component | Attributes | Required | Description |
---|---|---|---|
lp-provider | Required | Оболочка для остальных компонентов (остальные компоненты должны использоваться внутри lp-provider) | |
lp-data | Required | JSON строка с параметрами APIs. Подробнее | |
lp-signature | Required | Уникальная подпись каждого запроса. Подробнее | |
language | Optional | Язык клиента ru, uk, en | |
lp-apple-pay | Optional | Кнопка ApplePay | |
mode | Optional | black - черная кнопка по умолчанию, white - белая кнопка white-with-line - белая, с черным ободом | |
lp-privat24-pay | Optional | Кнопка Privat pay | |
mode | Optional | black - черная кнопка по умолчанию, white - белая кнопка | |
lp-qr | Optional | Компонент QR |
Схема работы

Пример
Для работы возможно подключить один или несколько виджетов.
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://static.liqpay.ua/elements/customElements.js"></script> </head> <body> <lp-provider lp-data="your_data" lp-signature="your_signature"> <lp-qr></lp-qr> </lp-provider> <lp-provider lp-data="your_data" lp-signature="your_signature"> <lp-apple-pay mode="black"></lp-apple-pay> </lp-provider> <lp-provider lp-data="your_data" lp-signature="your_signature"> <lp-privat24-pay mode="black"></lp-privat24-pay> </lp-provider> <script> const provider = document.querySelector('lp-provider'); provider.addEventListener('onpaymentsuccess', (customEvent) => { console.log(customEvent); }); // колбек для обработки успешного платежа provider.addEventListener('onpaymenterror', (customEvent) => { console.log(customEvent); }); // колбек для обработки ошибки </script> </body> </html>