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

Матеріал з apidocs
Перейти до: навігація, пошук
Немає опису редагування
Рядок 12: Рядок 12:


=== '''Фон картинкою''' ===
=== '''Фон картинкою''' ===
[[Файл:Фон-картинка веб (2).png|міні|400x400пкс|                                '''Реалізація на веб версії''' ]]
[[Файл:Знімок екрана 2025-04-04 о 14.19.40.png|міні|469x469пкс]]
 
 
.                                                                                          [[Файл:Фон-картинка веб (2).png|міні|400x400пкс|                                '''Реалізація на веб версії''' |ліворуч]]
 





Версія за 15:38, 8 квітня 2025


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

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



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


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


.

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



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

Параметри:

  • bodyImage:[назва картинки] (формат PNG або JPEG)
  • "bodyImagePosition":"center"
  • "bodyImageSize":"contain"



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


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


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


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


Параметри:

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





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


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


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

Параметр:

  • “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: Позиція картинки фону;