Інструкція з оновлення платіжної сторінки: відмінності між версіями

Матеріал з apidocs
Перейти до: навігація, пошук
Немає опису редагування
 
(Не показано 246 проміжних версій цього користувача)
Рядок 5: Рядок 5:
     <p>З 14 квітня 2025 року вступають в силу важливі оновлення платіжної сторінки, які дозволять вам налаштувати фон, кнопки та інші елементи сторінки відповідно до вашого бренду. Ось як ви можете оновити налаштування.</p>
     <p>З 14 квітня 2025 року вступають в силу важливі оновлення платіжної сторінки, які дозволять вам налаштувати фон, кнопки та інші елементи сторінки відповідно до вашого бренду. Ось як ви можете оновити налаштування.</p>
</div>
</div>
<br>
<br>    
----
 
== Різноманітність варіантів фону ==
== Різноманітність варіантів фону ==
----
----


=== '''Фон картинкою''' ===
=== '''Фон картинкою''' ===
Ви можете додавати '''картинку''' як фон сторінки. Зображення має бути у форматі '''PNG''' або '''JPEG'''.
Ви можете додавати картинку як фон сторінки. Зображення має бути у форматі '''PNG''' або '''JPEG.'''


''Для мобільних версій сторінки ця опція не відображається'' і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor”.
''Для мобільних версій сторінки ця опція не відображається'' і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor”.


'''Параметри:'''  
*
 
'''Параметри:'''


* <code>bodyImage:[назва картинки]</code> (формат '''PNG''' або '''JPEG''')  
* <code>bodyImage:[назва картинки]</code> (формат '''PNG''' або '''JPEG''')
* <code>"bodyImagePosition":"center"</code>
* <code>"bodyImagePosition":"center"</code>  
* <code>"bodyImageSize":"contain"</code>
* <code>"bodyImageSize":"contain"</code>
[[Файл:Знімок екрана 2025-04-23 о 13.03.01.png|центр|міні|391x391пкс]]
[[Файл:2025-04-07 14.42.21.jpg|міні|500x500px|'''Реалізація на мобільній версії'''|центр]]
<br>
<br>
'''Приклад реалізації на веб-версії'''
----
[[Файл:Знімок екрана 2025-04-04 о 13.42.15.png|центр|міні|600x600пкс]]
 
'''Приклад реалізації на мобільній версії'''
[[Файл:Знімок екрана 2025-04-04 о 14.18.32.png|центр|міні|925x925пкс]]


=== Множинність картинок на фоні ===
=== Множинність картинок на фоні ===
----Додано можливість використовувати '''кілька копій одного зображення''' для фону, що дозволяє створювати ефект текстури або патерну. Зображення має бути у форматі '''PNG''' або '''JPEG'''.
----Додано можливість використовувати кілька копій одного зображення для фону, що дозволяє створювати ефект текстури або патерну. Зображення має бути у форматі '''PNG''' або '''JPEG'''.


''Для мобільних версій сторінки ця опція не відображається'' і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor”.
''Для мобільних версій сторінки ця опція не відображається'' і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor" 


'''Параметри:'''
'''Параметри:'''
* <code>bodyImage: [назва картинки]</code> (формат PNG або JPEG)
* <code>bodyImage: [назва картинки]</code> (формат PNG або JPEG)


* <code>bodyImageRepeat: true</code>
* <code>bodyImageRepeat: true</code>
<br>
<br>
'''Приклад реалізації на веб-версії'''
[[Файл:2025-04-07 14.59.37.jpg|центр|міні|380x380px|'''Реаізація на веб версії''']]
[[Файл:Знімок екрана 2025-04-04 о 14.15.51.png|центр|міні|645x645пкс]]
[[Файл:2025-04-07 14.42.21.jpg|міні|500x500px|центр|'''Реалізація на мобільній версії''']]
[[Файл:Знімок екрана 2025-04-04 о 14.16.47.png|центр|міні|619x619пкс]]
 
'''Приклад реалізації на мобільній версії'''  
 
[[Файл:Знімок екрана 2025-04-04 о 14.19.40.png|центр|міні|939x939пкс]]
----


=== Фон з градієнтом ===
=== Фон з градієнтом ===
----Ви можете налаштувати '''градієнт''' як фон сторінки. Виберіть плавний перехід між кількома кольорами для динамічного вигляду
----
* <code>“bodyGradient”:</code> "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
 
<br>
 
'''Приклад реалізації на веб версії'''  
Ви можете налаштувати градієнт як фон сторінки. Виберіть плавний перехід між кількома кольорами для динамічного вигляду  
[[Файл:Знімок екрана 2025-04-04 о 14.22.16.png|центр|міні|579x579пкс]]
'''Приклад реалізації на мобільній версії'''
'''Параметр:'''
[[Файл:Знімок екрана 2025-04-04 о 14.23.23.png|центр|міні|915x915пкс]]
* <code>'''"bodyGradient":'''</code> <code>"linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"</code>
[[Файл:Градієнт веб (1).png|міні|500x500px|'''Реалізація на веб версії'''|центр]]
[[Файл:Моб градієнт фон.jpg|міні|500x500px|'''Реалізація на мобільній версії'''|центр]]
 
 
 
----


=== Кольоровий фон ===
=== Кольоровий фон ===
----Ви можете налаштувати '''градієнт''' як фон сторінки. Виберіть плавний перехід між кількома кольорами для динамічного вигляду.
----Ви можете вибрати '''однотонний фон''' для простого і стильного вигляду. Вибір кольору доступний у форматі '''HEX'''.  


o Параметр: “bodyGradient”: "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
'''Параметр''':  


'''Приклад реаліації на веб-версії'''
<code>"bodyColor": "#87a6e3"</code>[[Файл:Фон-колір веб.png|центр|міні|500x500px|'''Реалізація на веб версії''']]
[[Файл:Знімок екрана 2025-04-04 о 14.25.23.png|центр|міні|638x638пкс]]
[[Файл:Моб колір фон.jpg|центр|міні|500x500px|'''Реалізація на мобільній версії''']]
'''Приклад реалізації на мобільній версії'''
 
[[Файл:Знімок екрана 2025-04-04 о 14.26.49.png|центр|міні|923x923пкс]]
----


== Кастомізація кнопки "Оплатити" ==
== Кастомізація кнопки "Оплатити" ==
----
Тепер ви можете змінювати '''колір кнопки "Оплатити"''' відповідно до вашого дизайну, щоб зробити її більш помітною або гармонійно вписати в загальний стиль платіжної сторінки.
Тепер ви можете змінювати '''колір кнопки "Оплатити"''' відповідно до вашого дизайну, щоб зробити її більш помітною або гармонійно вписати в загальний стиль платіжної сторінки.


Параметр: "buttonColor": "#f8a81b"
'''Параметр:'''


'''Приклад реалізації на веб версії'''
<code>"buttonColor": "#f8a81b"</code>[[Файл:Кастомізована кнопка (1).png|центр|міні|450x450px|'''Реалізація на веб версії''' ]]
[[Файл:Знімок екрана 2025-04-04 о 14.28.22.png|центр|міні|539x539пкс]]
----
'''Приклад реалізації на мобільній версії'''  
[[Файл:Знімок екрана 2025-04-04 о 14.29.29.png|центр|міні|936x936пкс]]


== Додавання логотипу в хедері ==
== Додавання логотипу в хедері ==
Ви можете додати '''логотип вашого бренду''' в хедер платіжної сторінки для більшої впізнаваності. Якщо логотип не задано, хедер не відображається на сторінці
----Ви можете додати '''логотип вашого бренду''' в хедер платіжної сторінки для більшої впізнаваності. Якщо логотип не задано, хедер не відображається на сторінці
 
'''Параметр:'''
 
<code>"logo": [назва картинки]</code> (формат '''PNG''' або '''JPEG''')[[Файл:Лого веб (1).png|міні|'''Реалізація на веб версії'''|центр|500x500px]]


• Параметр: "logo": [назва картинки] (формат '''PNG''' або '''JPEG''')
----
[[Файл:Знімок екрана 2025-04-04 о 14.31.59.png|центр|міні|685x685пкс]]


=== Кастомізація кольору фону хедера ===
=== Кастомізація кольору фону хедера ===
Ви маєте можливість налаштувати '''колір фону хедера''' відповідно до вашого бренду.
----Ви маєте можливість налаштувати '''колір фону хедера''' відповідно до вашого бренду.


''Зміна кольору фону хедеру можлива тільки при додаванні логотипу в хедер.''
''Зміна кольору фону хедеру можлива тільки при додаванні логотипу в хедер.''


Параметр: "headerColor": #fef71f3b
'''Параметр:'''


'''Приклад реалізаці на веб версії'''
<code>"headerColor": #fef71f3b</code>
[[Файл:Знімок екрана 2025-04-04 о 18.28.10.png|центр|міні|480x480пкс]]


[[Файл:Хедер колір веб (1).png|міні|'''Реалізація на веб версії'''|центр|500x500px]]


'''Приклад реалізації на мобільній версії'''
 
[[Файл:Знімок екрана 2025-04-04 о 18.27.00.png|центр|міні|999x999пкс]]
 
----


== Як оновити налаштування? ==
== Як оновити налаштування? ==
----


* Надішліть запит щодо оновлення на один із наступних контактів: <br>
Щоб оновити налаштування платіжної сторінки, надішліть запит на один із наступних контактів:
'''Email:''' [email protected] <br>'''Telegram:''' <nowiki>https://t.me/EasyPay_merchant_API_support</nowiki>
 
* '''Email:''' [[[email protected]]]
* '''Telegram:''' https://t.me/EasyPay_merchant_API_support
<br>
'''У запиті надішліть наступні дані:'''
'''У запиті надішліть наступні дані:'''
# '''PartnerKey''' – ваш унікальний ключ партнера.
# '''PartnerKey''' – ваш унікальний ключ партнера.
# '''ServiceKey''' – ваш унікальний ключ сервісу.
# '''ServiceKey''' – ваш унікальний ключ сервісу.
Рядок 102: Рядок 119:
# '''Параметри оновлень у форматі JSON''', наприклад:
# '''Параметри оновлень у форматі JSON''', наприклад:


У запиті надішліть:
* PartnerKey
* ServiceKey
* файли картинок логотипу чи фонової (формат '''PNG''' або '''JPEG''') – у разі необхідності
* '''параметри оновлень''' у форматі '''JSON,''' наприклад''':'''
<br>
<br>
<syntaxhighlight lang="json" line="1">
<syntaxhighlight lang="json" line="1">
Рядок 125: Рядок 136:
=== Пояснення параметрів: ===
=== Пояснення параметрів: ===


* '''logo''': Назва файлу логотипу, який потрібно додати.
* '''logo''': Назва файлу логотипу, який потрібно додати;
* '''headerColor''': Колір шапки сторінки в форматі HEX.
* '''headerColor''': Колір шапки сторінки;
* '''bodyColor''': Основний колір фону сторінки.
* '''bodyColor''': Основний колір фону сторінки;
* '''bodyImage''': Назва фону, якщо ви додаєте картинку на фон.
* '''bodyImage''': Назва фону, якщо ви додаєте картинку на фон;
* '''buttonColor''': Колір кнопки "Оплатити".
* '''buttonColor''': Колір кнопки "Оплатити";
* '''bodyGradient''': Градієнт для фону (у разі необхідності).
* '''bodyGradient''': Градієнт для фону;
* '''bodyImageRepeat''': Якщо потрібно повторювати картинку фону.
* '''bodyImageRepeat''': Якщо потрібно повторювати картинку фону;
* '''bodyImageSize''': Розмір картинки фону (наприклад, "auto").
* '''bodyImageSize''': Розмір картинки фону;
* '''bodyImagePosition''': Позиція картинки фону.
* '''bodyImagePosition''': Позиція картинки фону;
__БЕЗ_РЕДАГУВ_РОЗДІЛУ__

Поточна версія на 11:44, 25 квітня 2025


Шановні мерчанти!

З 14 квітня 2025 року вступають в силу важливі оновлення платіжної сторінки, які дозволять вам налаштувати фон, кнопки та інші елементи сторінки відповідно до вашого бренду. Ось як ви можете оновити налаштування.



Різноманітність варіантів фону


Фон картинкою

Ви можете додавати картинку як фон сторінки. Зображення має бути у форматі PNG або JPEG.

Для мобільних версій сторінки ця опція не відображається і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor”.

Параметри:

  • bodyImage:[назва картинки] (формат PNG або JPEG)
  • "bodyImagePosition":"center"
  • "bodyImageSize":"contain"
Реалізація на мобільній версії




Множинність картинок на фоні


Додано можливість використовувати кілька копій одного зображення для фону, що дозволяє створювати ефект текстури або патерну. Зображення має бути у форматі PNG або JPEG.

Для мобільних версій сторінки ця опція не відображається і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor"

Параметри:

  • bodyImage: [назва картинки] (формат PNG або JPEG)
  • bodyImageRepeat: true


Реаізація на веб версії
Реалізація на мобільній версії



Фон з градієнтом



Ви можете налаштувати градієнт як фон сторінки. Виберіть плавний перехід між кількома кольорами для динамічного вигляду

Параметр:

  • "bodyGradient": "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
Реалізація на веб версії
Реалізація на мобільній версії



Кольоровий фон


Ви можете вибрати однотонний фон для простого і стильного вигляду. Вибір кольору доступний у форматі HEX.

Параметр:

"bodyColor": "#87a6e3"

Реалізація на веб версії
Реалізація на мобільній версії

Кастомізація кнопки "Оплатити"


Тепер ви можете змінювати колір кнопки "Оплатити" відповідно до вашого дизайну, щоб зробити її більш помітною або гармонійно вписати в загальний стиль платіжної сторінки.

Параметр:

"buttonColor": "#f8a81b"

Реалізація на веб версії

Додавання логотипу в хедері


Ви можете додати логотип вашого бренду в хедер платіжної сторінки для більшої впізнаваності. Якщо логотип не задано, хедер не відображається на сторінці

Параметр:

"logo": [назва картинки] (формат PNG або JPEG)

Реалізація на веб версії

Кастомізація кольору фону хедера


Ви маєте можливість налаштувати колір фону хедера відповідно до вашого бренду.

Зміна кольору фону хедеру можлива тільки при додаванні логотипу в хедер.

Параметр:

"headerColor": #fef71f3b

Реалізація на веб версії



Як оновити налаштування?


Щоб оновити налаштування платіжної сторінки, надішліть запит на один із наступних контактів:


У запиті надішліть наступні дані:

  1. PartnerKey – ваш унікальний ключ партнера.
  2. ServiceKey – ваш унікальний ключ сервісу.
  3. Файли картинок логотипу чи фонової (формат PNG або JPEG) – якщо потрібно оновити зображення.
  4. Параметри оновлень у форматі JSON, наприклад:


{
   "logo": "logo.png",
   "headerColor": "#97F9A9",
   "bodyColor": "#FDF4E3",
   "bodyImage": "logo-test-tile.jpg",
   "buttonColor": "#7B68EE",
   "bodyGradient": "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
   "bodyImageRepeat": true,
   "bodyImageSize": "auto",
   "bodyImagePosition": "center"
}

Пояснення параметрів:

  • logo: Назва файлу логотипу, який потрібно додати;
  • headerColor: Колір шапки сторінки;
  • bodyColor: Основний колір фону сторінки;
  • bodyImage: Назва фону, якщо ви додаєте картинку на фон;
  • buttonColor: Колір кнопки "Оплатити";
  • bodyGradient: Градієнт для фону;
  • bodyImageRepeat: Якщо потрібно повторювати картинку фону;
  • bodyImageSize: Розмір картинки фону;
  • bodyImagePosition: Позиція картинки фону;