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

Поточна версія на 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

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

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

Email: [email protected]
Telegram: https://t.me/EasyPay_merchant_API_support

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

PartnerKey – ваш унікальний ключ партнера.
ServiceKey – ваш унікальний ключ сервісу.
Файли картинок логотипу чи фонової (формат PNG або JPEG) – якщо потрібно оновити зображення.
Параметри оновлень у форматі 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: Позиція картинки фону;

@@ Рядок 5: / Рядок 5: @@
      <p>З 14 квітня 2025 року вступають в силу важливі оновлення платіжної сторінки, які дозволять вам налаштувати фон, кнопки та інші елементи сторінки відповідно до вашого бренду. Ось як ви можете оновити налаштування.</p>
 </div>
 <br>
 ----
@@ Рядок 17: / Рядок 17: @@
 *
-[[Файл:Знімок екрана 2025-04-04 о 14.31.59.png|міні|'''Реалізація на мобільній версії''']]
-[[Файл:Фон-картинка веб (2).png|міні|400x400пкс|                                 '''Реалізація на веб версії''' |ліворуч]]
-<br>
+'''Параметри:'''
-'''Параметри:'''
 * <code>bodyImage:[назва картинки]</code> (формат '''PNG''' або '''JPEG''')
 * <code>"bodyImagePosition":"center"</code>
 * <code>"bodyImageSize":"contain"</code>
+[[Файл:Знімок екрана 2025-04-23 о 13.03.01.png|центр|міні|391x391пкс]]
+[[Файл:2025-04-07 14.42.21.jpg|міні|500x500px|'''Реалізація на мобільній версії'''|центр]]
+<br>
 ----
@@ Рядок 55: / Рядок 33: @@
 ----Додано можливість використовувати кілька копій одного зображення для фону, що дозволяє створювати ефект текстури або патерну. Зображення має бути у форматі '''PNG''' або '''JPEG'''.
 ''Для мобільних версій сторінки ця опція не відображається'' і буде використано стандартний (#F1F3F7) фон або заданий вами у параметрі “bodyColor"
-[[Файл:Знімок екрана 2025-04-04 о 14.31.59.png|міні|'''Реалізація на мобільній версії''']]
-*
-[[Файл:Знімок екрана 2025-04-04 о 14.15.51.png|ліворуч|міні|323x323пкс|'''Реалізація на веб версії''' ]]
-<br>
 '''Параметри:'''
@@ Рядок 81: / Рядок 39: @@
 * <code>bodyImageRepeat: true</code>
+<br>
+[[Файл:2025-04-07 14.59.37.jpg|центр|міні|380x380px|'''Реаізація на веб версії''']]
+[[Файл:2025-04-07 14.42.21.jpg|міні|500x500px|центр|'''Реалізація на мобільній версії''']]
@@ Рядок 96: / Рядок 48: @@
 === Фон з градієнтом ===
 ----
-[[Файл:Градієнт веб (1).png|міні|'''Реалізація на веб версії''' ]]
 Ви можете налаштувати градієнт як фон сторінки. Виберіть плавний перехід між кількома кольорами для динамічного вигляду
-[[Файл:Моб градієнт фон.jpg|ліворуч|міні|468x468пкс|'''Реалізація на мобільній версії''' ]]
-<br>
-<br>
 '''Параметр:'''
-* <code>'''“bodyGradient”:'''</code> "linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"
+* <code>'''"bodyGradient":'''</code> <code>"linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"</code>
+[[Файл:Градієнт веб (1).png|міні|500x500px|'''Реалізація на веб версії'''|центр]]
+[[Файл:Моб градієнт фон.jpg|міні|500x500px|'''Реалізація на мобільній версії'''|центр]]
@@ Рядок 148: / Рядок 66: @@
 '''Параметр''':
-<code>"bodyColor": "#87a6e3"</code>[[Файл:Фон-колір веб.png|міні|481x481px|ліворуч]]
+<code>"bodyColor": "#87a6e3"</code>[[Файл:Фон-колір веб.png|центр|міні|500x500px|'''Реалізація на веб версії''']]
-[[Файл:Моб колір фон.jpg|центр|міні|466x466px]]
+[[Файл:Моб колір фон.jpg|центр|міні|500x500px|'''Реалізація на мобільній версії''']]
 ----
 == Кастомізація кнопки "Оплатити" ==
-----Тепер ви можете змінювати '''колір кнопки "Оплатити"''' відповідно до вашого дизайну, щоб зробити її більш помітною або гармонійно вписати в загальний стиль платіжної сторінки.
+----
+Тепер ви можете змінювати '''колір кнопки "Оплатити"''' відповідно до вашого дизайну, щоб зробити її більш помітною або гармонійно вписати в загальний стиль платіжної сторінки.
-Параметр:
+'''Параметр:'''
-<code>"buttonColor": "#f8a81b"</code>[[Файл:Кастомізована кнопка (1).png|міні|406x406px]]
+<code>"buttonColor": "#f8a81b"</code>[[Файл:Кастомізована кнопка (1).png|центр|міні|450x450px|'''Реалізація на веб версії''' ]]
 ----
-<br>
 == Додавання логотипу в хедері ==
-----[[Файл:Лого веб (1).png|міні|518x518px]]
+----Ви можете додати '''логотип вашого бренду''' в хедер платіжної сторінки для більшої впізнаваності. Якщо логотип не задано, хедер не відображається на сторінці
-Ви можете додати '''логотип вашого бренду''' в хедер платіжної сторінки для більшої впізнаваності. Якщо логотип не задано, хедер не відображається на сторінці
-Параметр:
-<code>"logo": [назва картинки]</code> (формат '''PNG''' або '''JPEG''')
-<br>
-<br>
+'''Параметр:'''
+<code>"logo": [назва картинки]</code> (формат '''PNG''' або '''JPEG''')[[Файл:Лого веб (1).png|міні|'''Реалізація на веб версії'''|центр|500x500px]]
 ----
@@ Рядок 231: / Рядок 98: @@
 <code>"headerColor": #fef71f3b</code>
-[[Файл:Моб хедер колір копія.jpg|міні|'''Реалізація на мобільній версії''' |759x759px]]
+[[Файл:Хедер колір веб (1).png|міні|'''Реалізація на веб версії'''|центр|500x500px]]
-[[Файл:Хедер колір веб (1).png|ліворуч|міні|482x482пкс|'''Реалізація на мобільній версії''' ]]
-<br>
-<br>
-<br>
@@ Рядок 316: / Рядок 145: @@
 * '''bodyImageSize''': Розмір картинки фону;
 * '''bodyImagePosition''': Позиція картинки фону;
+__БЕЗ_РЕДАГУВ_РОЗДІЛУ__