Інтеграція платіжного віджету
Backend
Для того, щоб ініціалізувати платіжний віджет на клієнтській стороні (frontend), необхідно спочатку на серверній стороні (backend) викликати метод генерації спеціального токену, котрий потім передати у функцію ініціалізації віджету.
де, {payload} - підписані jwt дані для створення інвосу в системі UAPAY
Приклад payload до підписания jwt:
Ключ | Опис | Тип | Обов'зковість | Приклад |
|---|---|---|---|---|
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 | ні | |
callbackUrl | адреса відправки пост-відповідей | string | ні |
token - payload, підписанный jwt (більше про токен та підписи можно дізнатися в розділі Швидкий старт)
Цей токен необхідно передати у функцію ініціалізіції платіжного віджету: 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 з платіжним віджетом.