Библиотека виджетов методов оплаты
Библиотека для отображения виджетов методов оплаты на вашем сайте
Что такое виджеты методов оплаты?
Это библиотека с помощью которой можно отобразить виджеты оплаты:
  • 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 Кнопка 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>