Платіжна кнопка – це HTML - код, який легко інтегрувати на будь-яку веб-сторінку Партнера.
<script src="https://gpay.gerc.ua/v1/bundle.min.js"></script>Увага!
Жодних файлів, окрім бібліотеки JS, підключати не треба! Бібліотека сама прикріпить скрипт Google Pay, створить INLINE стилі для оформлення кнопок.
2. Відповідно до технічної документації інтегруйте на своїй веб-сторінці кнопку(и) (віджет), використовуючи об'єкт типу "container":
<div class='preserveHtml' id="container"> </div>3. Опишіть конфігурацію для роботи з бібліотекою JS згідно з наведеним прикладом:
...
<script>
window.env = {
root: {
container: "#container",
amount: 100,
fee: 1000,
buttonsStyle: {
theme: "black"
}
},
googlePay: { // Конфігурація Google Pay
environment: "TEST",
merchantId: "BCR2DN6T3ONJB5AW",
merchantName: "GERC",
gateway: "gerc",
gatewayMerchantId: "gercmerchant"
},
applePay: { // Конфігурація Apple Pay
merchantId: "merchant.ua.gerc.fc",
label: "Gerc" // Ім'я замовлення, що відображається в Pop-Up`e Apple Pay
},
...
</script> ...
| Параметр | Опис |
|---|---|
| container | Посилання на об'єкт типу Element, який є першим елементом у документі. Він відповідає вказаному набору CSS селекторів |
| amount | Остаточна сума платежу у копійках |
| fee | Комісія платежа у копійках |
| buttonsStyle | Оформлення платіжних кнопок |
| theme | Тема: white/black. За замовчуванням - black |
Приклад реалізації Callback -> onReady
...
onReady: async () => {
console.log("onReady");
},
...Приклад реалізації Callback -> onError
...
onError: async (error) => {
alert(`${error}`);
},
...2. Після натискання клієнтом платіжної кнопки, спрацьовує Callback -> onClick
На цьому етапі необхідно надіслати запит на реєстрацію платежу в системі GercPay (getID)
Приклад реалізації Callback -> onClick
...
onClick: async (data) => {
console.log("onClick", data);
const rawResponse = await fetch('https://fc-dev.gerc.ua:8443/js-library/v2/partner-backend/?common=getId', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const content = await rawResponse.json();
if (!content.data)
throw new Error(`onClick: ${JSON.stringify(content)}`);
const { oper_id } = content.data;
// -- * кінець прикладу onClick * --
return { oper_id }; // На FrontEnd обов'язково потрібно повернути oper_id !
},
...
Відповідь (data) у форматі json з параметром amount (остаточна сума платежу), який був зазначений у конфігурації.
На FrontEnd обов'язково потрібно повернути oper_id !
Приклад відповіді:
{
"amount": 100
}3. Виключно для Apple Pay відбувається валідація мерчанта Callback -> onValidateApplePay.
Приклад реалізації Callback -> onValidateApplePay
...
onValidateApplePay: async (data) => {
console.log("onValidateApplePay", data);
const rawResponse = await fetch('https://fc-pay-test.gerc.ua:8443/js-library/v2/partner-backend/?apay=validate', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
const content = await rawResponse.json();
if (!content.data)
throw new Error(`onValidateApplePay: ${JSON.stringify(content)}`);
const applePayValidationResponse = content.data;
// -- * кінець прикладу onValidateApplePay * --
return applePayValidationResponse; // На цьому етапі відповідь валідації з PSP3 у форматі json потрібно повернути на
FrontEnd!
},
....
Відповідь (data) – сформоване непідписане тіло запиту для відправки на API валідації ApplePay згідно документації (див. Метод оплати Apple Pay даного документу).
Примітка!
Запит, так само як і getID, виконується методом POST
URL: https://fc-pay.gerc.ua/index.php?apay=validate&partner_id=PARTNER_ID
де, PARTNER_ID - ідентифікатор партнера у системі GercPay
Приклад запиту:
{
"data": {
"apple_validation_url": "validationURL",
"oper_id": "oper_id",
"domain": "domain"
},
"signature": "..."
}
| Параметр | Опис |
| apple_validation_url | посилання, яке ви отримали від Apple (event.validationURL) |
| domain | доменне ім'я (window.location.hostname), на яке зареєстрований мерчант Apple |
Відповідь у форматі json потрібно повернути на FrontEnd для підтвердження валідації!
4. При отриманні платіжного токену google/apple, спрацьовує Callback -> onGettedToken
Приклад реалізації Callback -> onGettedToken
...
onGettedToken: async (data) => {
console.log("onGettedToken", data);
alert(`onGettedToken\n${JSON.stringify(data)}`);
},
...
Відповідь (data) - частковий набір даних у форматі json для подальшої роботи з методом оплати ApplePay (див. Метод оплати Apple Pay даного документу)
На BackEnd Партнера в payload залишається додати user_ip та partner_id
Приклад відповіді:
{
"oper_id": 1,
"color_depth": 24,
"screen_height": 1067,
"screen_width": 1707,
"user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
"user_accept": "*/*",
"google_data": {... Google Pay Payment Token} //отриманий платіжний токен з Google API
}де,color_depth,screen_height, screen_width, user_agent, user_accept - параметри для 3DS сторінки.