Library of payment method widgets
Library for imaging of payment method widgets on your website
What are payment method widgets?
It’s the library which can be used to display:
  • Apple Pay payment widgets (without direct integration with Apple)
  • Privat pay
  • QR in the cart on your site
How do payment method widgets work?
  1. Form the necessary parameters according to the documentation.
  2. Install one or several payment method widgets on your website.
  3. Client make payments using one of selected methods Apple Pay, Privat pay, QR, when he is on your site.
  4. As a result - you received a response from LiqPay about payment status.
Integration
  1. To connect Script:
    <script type="text/javascript" src="https://static.liqpay.ua/elements/customElements.js"></script>
  2. Use available web components: <lp-provider></lp-provider>, <lp-apple-pay></lp-apple-pay>, <lp-privat24-pay></lp-privat24-pay>, <lp-qr></lp-qr>
Necessary parameters:
Component Attributes Required Description
lp-provider Required Shell for the rest of components (the rest of components must be used inside lp-provider)
lp-data Required JSON string with APIs. More details
lp-signature Required Is the unique signature of each request. More details
language Optional Customer's language ru, uk, en
lp-apple-pay Optional Apple Pay button
mode Optional black - black button by default, white - white button white-with-line - white, with black rim
lp-privat24-pay Optional Privat pay button
mode Optional black - black button by default, white - white button
lp-qr Optional QR component

Scheme of work
Example
You can connect one or several widgets for work
<!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>