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

Матеріал з apidocs
Перейти до: навігація, пошук
Немає опису редагування
Немає опису редагування
Рядок 96: Рядок 96:
'''Параметр:'''
'''Параметр:'''
* <code>'''“bodyGradient”:'''</code> <code>"linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"</code>
* <code>'''“bodyGradient”:'''</code> <code>"linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12)"</code>
[[Файл:Моб градієнт фон.jpg|міні]]
[[Файл:Моб градієнт фон.jpg|міні|'''Реалізація на мобільній версії''']]




Рядок 103: Рядок 103:




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




Рядок 122: Рядок 122:
<code>"bodyColor": "#87a6e3"</code>
<code>"bodyColor": "#87a6e3"</code>


[[Файл:Моб колір фон.jpg|міні]]
[[Файл:Моб колір фон.jpg|міні|'''Реалізація на мобільній версії''']]




Рядок 129: Рядок 129:




[[Файл:Фон-колір веб.png|ліворуч|міні]]
[[Файл:Фон-колір веб.png|ліворуч|міні|'''Реалізація на веб версії''']]




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


[[Файл:Моб кнопкв колір.jpg|міні]]
[[Файл:Моб кнопкв колір.jpg|міні|'''Реалізація на мобільній версії''']]




Рядок 181: Рядок 181:




[[Файл:Кастомізована кнопка (1).png|ліворуч|міні]]
[[Файл:Кастомізована кнопка (1).png|ліворуч|міні|'''Реалізація на веб версії''']]




Рядок 217: Рядок 217:
== Додавання логотипу в хедері ==
== Додавання логотипу в хедері ==
----
----
[[Файл:Лого веб (1).png|ліворуч|міні]]
[[Файл:Лого веб (1).png|ліворуч|міні|'''Реалізація на веб версії''']]




Рядок 258: Рядок 258:
<code>"headerColor": #fef71f3b</code>
<code>"headerColor": #fef71f3b</code>


[[Файл:Моб хедер колір копія.jpg|міні]]
[[Файл:Моб хедер колір копія.jpg|міні|'''Реалізація на мобільній версії''']]




Рядок 265: Рядок 265:




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





Версія за 20:02, 10 квітня 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: Позиція картинки фону;