Бібліотека віджетів методів оплати
Бібліотека для відображення віджетів методів оплати на вашому сайті
Що таке віджети методів оплати?
Це бібліотека за допомогою якої можливо відобразити віджети оплати:
- Apple Pay (без прямої інтеграції Apple)
- PrivatPay
- QR у кошику на вашому сайті
Як працюють віджети методів оплати?
- Сформуйте необхідні параметри згідно документації.
- Встановіть один чи декілька віджетів методів оплати на сторінку вашого сайту.
- Клієнт сплачує одним з обраних способів Apple Pay, PrivatPay, 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 | Мова клієнта uk, en | ||
| lp-apple-pay | Optional | Кнопка Apple Pay | ||
| mode | Optional | black - чорна кнопка за замовчуванням, white - біла кнопка, white-with-line - біла, з чорним ободом | ||
| lp-privat24-pay | Optional | Кнопка PrivatPay | ||
| mode | Optional | black - чорна кнопка за замовчуванням, white - біла кнопка | ||
| lp-qr | Optional | Компонент QR |
Формування запиту до API при самостійній інтеграції:
Необхідні URL для роботи в залежності від обраної моделі:
- https://www.liqpay.ua/api/request — Server-Server;
- https://www.liqpay.ua/api/3/checkout — Client-Server;
Для виклику API LiqPay необхідно передати параметри data і signature (Server - Server) POST методом або перенаправити клієнта (Client-Server) використовуючи POST метод, де:
data
- json рядок з параметрами APIs закодована функцією base64, base64_encode( json_string ),
signature
- унікальний підпис кожного запиту base64_encode( sha1( private_key + data + private_key) ),
base64_encode
- повертає рядок, закодований методом base64,
sha1
- повертає хеш у вигляді бінарного рядку з 20 символів.
Формування data і signature, приклад:
Для підключення прийому оплати через LiqPay, формуємо json рядок з параметрами виклику апі, де:
| Parameter | Required | Type | Description | |
|---|---|---|---|---|
| version | Required | Number | Версія API. Наприклад: 3 | |
| public_key | Required | String | Публічний ключ - ідентифікатор створеної компанії. Наприклад: i00000000 | |
| private_key | Required | String | Приватний ключ створеної компанії (не надається нікому крім Вашого розробника). Наприклад: a4825234f4bae72a0be04eafe9e8e2bada209255 | |
| action | Required | String | Тип операції. Можливі значення: pay - платіж, hold - блокування коштів на рахунку відправника, subscribe - регулярний платіж, paydonate - пожертва, auth - предавторізація картки | |
| amount | Required | Number | Сума платежу. Наприклад: 5, 7.34 | |
| currency | Required | String | Валюта платежу. Можливі значення:USD, EUR, UAH. Додаткові валюти можуть бути встановлені за запитом компанії | |
| description | Required | String | Призначення платежу | |
| order_id | Required | String | Унікальний ID покупки у Вашому магазині. Максимальна довжина 255 символів |
Більше параметрів в документації
Приклад створення json_string:
json_string =
{"public_key":"i00000000","version":"3","action":"pay","amount":"3","currency":"UAH","description":"test","order_id":"000001"}Приклад кодування json_string функцією base64_encode, компанія отримує data:
data = eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9
Приклад формування signature, компанія формує рядок sign_string шляхом конкатенації private_key + data + private_key:
sign_string = a4825234f4bae72a0be04eafe9e8e2bada209255eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9a4825234f4bae72a0be04eafe9e8e2bada209255
Після застосування функцій base64_encode( sha1( sign_string) ) отримуємо рядок:
signature = wR+UZDC4jjeL/qUOvIsofIWpZh8=
Приклад відправки запиту до LiqPay:
1.Для перенаправлення клієнта на сторінку оплати LiqPay (Client - Server) необхідно сформувати HTML-форму:
<form method="POST" action="https://www.liqpay.ua/api/3/checkout" accept-charset="utf-8">
<input type="hidden" name="data"
value="eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9"/>
<input type="hidden" name="signature" value="wR+UZDC4jjeL/qUOvIsofIWpZh8="/><input
type="image" src="//static.liqpay.ua/buttons/payUk.png"/></form>
<input type="hidden" name="data"
value="eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9"/>
<input type="hidden" name="signature" value="wR+UZDC4jjeL/qUOvIsofIWpZh8="/><input
type="image" src="//static.liqpay.ua/buttons/payUk.png"/></form>
2.Для взаємодії (Server - Server) отримані data і signature необхідно відправити на url https://www.liqpay.ua/api/request:
curl --silent -XPOST https://www.liqpay.ua/api/request --data-
urlencodedata="eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9"/>
--data-urlencode
signature="wR+UZDC4jjeL/qUOvIsofIWpZh8="
urlencodedata="eyJwdWJsaWNfa2V5IjoiaTAwMDAwMDAwIiwidmVyc2lvbiI6IjMiLCJhY3Rpb24iOiJwYXkiLCJhbW91bnQiOiIzIiwiY3VycmVuY3kiOiJVQUgiLCJkZXNjcmlwdGlvbiI6InRlc3QiLCJvcmRlcl9pZCI6IjAwMDAwMSJ9"/>
--data-urlencode
signature="wR+UZDC4jjeL/qUOvIsofIWpZh8="
3.Статус операції буде відправлений на server_url
4.Успішне завершення оплати
Схема роботи
<!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>