Бібліотека віджетів методів оплати
Бібліотека для відображення віджетів методів оплати на вашому сайті
Що таке віджети методів оплати?
Це бібліотека за допомогою якої можливо відобразити віджети оплати:
  • Apple Pay (без прямої інтеграції Apple)
  • Privat pay
  • QR у кошику на вашому сайті
Як працюють віджети методів оплати?
  1. Сформуйте необхідні параметри згідно документації.
  2. Встановіть один чи декілька віджетів методів оплати на сторінку вашого сайту.
  3. Клієнт сплачує одним з обраних способів Apple Pay, Privat pay, QR знаходячись на сайті.
  4. По результату - ви отримаєте відповідь від LiqPay про статус платежу.
Інтеграція
  1. Підключити Script:
    <script type="text/javascript" src="https://static.liqpay.ua/elements/customElements.js"></script>
  2. Використати доступні веб-компоненти: <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 Кнопка Apple Pay
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>