Інтеграція платіжного віджету

Backend

Для того, щоб ініціалізувати платіжний віджет на клієнтській стороні (frontend), необхідно спочатку на серверній стороні (backend) викликати метод генерації спеціального токену, котрий потім передати у функцію ініціалізації віджету. 

де, {payload} - підписані jwt дані для створення інвосу в системі UAPAY

Приклад payload до підписания jwt:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 { "params": { "clientId": 12, "locale": "uk", "systemType": "ECOM", "externalId": "eef2384d-96ed-436d-97b0-40162776c704", "type": "PAY", "reusability": false, "description": "test widget initialization", "amount": 10000, "redirectUrl": "https://uapay.ua", "callbackUrl": "http://ptsv2.com/t/test_server2/post" }, "iat": 1561974702 }

 

Ключ

Опис

Тип

Обов'зковість

Приклад

Ключ

Опис

Тип

Обов'зковість

Приклад

params

 

 

 

 

clientId

id клієнта в системі UAPAY

integer

так

12

locale

мова віджету

string

так

"uk"|"ru"|"en"

systemType

тип системи оплати

string

так

"P2P"|"ECOM"

externalId

зовнішній id

string

так

"1500383075"

type

тип операції

string

так

"PAY", "HOLD"

cardToId

id карти

string, uuid

ні

"b8220f46-8c28-4068-9488-2e1b37359b06"

reusability

параметр багаторазового використання інвойсу

boolean

ні

true/false

description

опис призначення інвойсу

string

ні

"тестовий платіж"

amount

сума платежу ( в копійках )

integer

так

10000

redirectUrl

адреса перенаправлення

string

ні

"https://uapay.ua"

callbackUrl

адреса відправки пост-відповідей

string

ні

"http://ptsv2.com/t/test_server/post"

token - payload, підписанный jwt (більше про токен та підписи можно дізнатися в розділі Швидкий старт)

1 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXJhbXMiOnsiY2xpZW50SWQiOjEyLCJsb2NhbGUiOiJ1ayIsInN5c3RlbVR5cGUiOiJFQ09NIiwiZXh0ZXJuYWxJZCI6ImVlZjIzODRkLTk2ZWQtNDM2ZC05N2IwLTQwMTYyNzc2YzcwNCIsInR5cGUiOiJQQVkiLCJyZXVzYWJpbGl0eSI6ZmFsc2UsImRlc2NyaXB0aW9uIjoidGVzdCB3aWRnZXQgaW5pdGlhbGl6YXRpb24iLCJhbW91bnQiOjEwMDAwLCJyZWRpcmVjdFVybCI6Imh0dHBzOi8vdWFwYXkudWEiLCJjYWxsYmFja1VybCI6Imh0dHA6Ly9wdHN2Mi5jb20vdC90ZXN0X3NlcnZlcjIvcG9zdCJ9LCJpYXQiOjE1NjE5NzUzODJ9.y41z8GYHFn4NHZ4VUdYWisU1FJcCmIReOhzPDwoPVv4

Цей токен необхідно передати у функцію ініціалізіції платіжного віджету: UAPAY.init({ token: payload })

Frontend

Сторінка, на якій буде проводитися платіж, має включати файл стилів та скрипт ініціалізації.

Підключити їх потрібно в <head> секції свого документу.

UAPAY CDN

1 2 <link rel="stylesheet" href="https://widget.uapay.ua/vendor/style.css"> <script src="https://widget.uapay.ua/vendor/widget-bundle.js"></script>

Ініціалізація віджету оплати відбувається за допомогою звернення до глобального об'єкту UAPAY, який мав з'явитися в об'єкті window.

Перевірити це можливо викликавши в консолі команду:

1 console.log(window.UAPAY);

Для запуску процесу оплати потрібно викликати метод init(), передавши в нього конфігурацію конкретного платежу.

Приклад повного документу.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Title</title>   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">     <!-- Подключите стили и скрипт -->   <link rel="stylesheet" href="https://widget.stage.uapay.ua/vendor/style.css">   <script src="https://widget.stage.uapay.ua/vendor/widget-bundle.js"></script>   <!-- End of Подключите стили и скрипт -->   <style>     pre {       width: 100%; white-space: pre-wrap; word-break: break-word;     }   </style> </head> <body> <div class="container">   <div class="row">     <div class="col-lg-12">       <div id="payment_widget"></div>     </div>   </div> </div> <hr> <div class="container">   <div class="row">     <div class="col-lg-12">       <div class="form-group">         <label for="token">Token:</label>         <input class="form-control" type="text" id="token" placeholder="token" value="" required>       </div>     </div>     <div class="col-lg-12">       <div class="form-group">         <label for="target">Target:</label>         <input class="form-control" type="text" id="target" placeholder="target" value="payment_widget" readonly>       </div>     </div>     <div class="col-lg-12">       <div class="form-group form-check">         <input class="form-check-input" type="checkbox" id="sandbox" checked="checked">         <label for="sandbox">Use stage</label>       </div>     </div>     <div class="col-lg-12">       <div class="form-group">         <button onclick="startExample()" class="btn btn-primary">Submit token</button>       </div>     </div>     <div class="col-lg-12">       <table width="800" class="table table-striped">         <thead>         <tr>           <td colspan="4">             Тестовые карты           </td>         </tr>         </thead>         <tbody>         <tr>           <td>5269610000005505</td>           <td>02/20</td>           <td>274</td>           <td>3ds quasi</td>         </tr>         <tr>           <td>5269610000005513</td>           <td>02/20</td>           <td>958</td>           <td>3ds quasi</td>         </tr>         <tr>           <td>4134170000010886</td>           <td>02/20</td>           <td>530</td>           <td>3ds</td>         </tr>         <tr>           <td>4134170000010902</td>           <td>02/20</td>           <td>372</td>           <td>lookup</td>         </tr>         <tr>           <td>5169305400008156</td>           <td>12/19</td>           <td>146</td>           <td>lookup</td>         </tr>         <tr>           <td>4314362500196164</td>           <td>12/19</td>           <td>617</td>           <td>3ds</td>         </tr>         </tbody>       </table>     </div>   </div> </div> <script>   function startExample() {     // 1. Родительский элемент виджета {DOM element}     var target = document.getElementById('target').value;       // 2. Сгенерированный токен {string}     var token = document.getElementById('token').value;       // 3. Тестовый режим {true/false}     var sandbox = document.getElementById('sandbox').checked;       // 4. Ссылка на редирект после успешной оплаты     var redirectUrl = 'https://uapay.ua';       // 5. Ссылка на редирект после не успешной оплаты     var errorRedirectUrl = 'https://uapay.ua';       // 6. Укажите цвет фона приложения     var customize = { bodyBg: '#d82d29' };       // 7. Сформируйте объект для инициализации     var initData = { target, sandbox, token, customize, redirectUrl, errorRedirectUrl };       // 8. Запустите фрейм оплаты     window.UAPAY.init(initData);   } </script> </body> </html>

Після виклику метода init() на вашій сторінці з'явиться iframe з платіжним віджетом.