# Рекомендації щодо UI/UX (/uk/in-store/integration/ui_ux_recommendations)



Інтеграція платіжного рішення стосується не лише технічної реалізації; йдеться про створення користувацького досвіду, який справляє враження безпечного, професійного і простого у використанні. Нижче наведено рекомендації щодо того, як побудувати сценарії вашого застосунку навколо Tapaya Accept SDK.

## Запуск платежу [#triggering-the-payment]

### Чіткий заклик до дії (CTA) [#clear-call-to-action-cta]

Переконайтеся, що кнопка для ініціювання платежу помітна і має зрозумілий підпис.

* **Добре:** «Сплатити 12,50 €», «Оплатити карткою», «До оплати»
* **Погано:** «Надіслати», «Далі», «OK»

### Відгук на взаємодію [#feedback-on-interaction]

Коли користувач натискає кнопку оплати, одразу надайте візуальний відгук (наприклад, індикатор завантаження або неактивний стан кнопки), щоб запобігти подвійному натисканню, поки SDK ініціалізується.

## Під час транзакції [#during-the-transaction]

Tapaya Accept SDK обробляє чутливі частини транзакції (зчитування картки, введення PIN) у власному інтерфейсі, що відображається поверх застосунку. Проте за контекст до і після транзакції відповідає ваш застосунок.

### Не перекривайте екран [#do-not-obscure-the-screen]

SDK потребує всього екрана, щоб забезпечити безпеку та запобігти атакам із накладанням вікон (overlay). Не намагайтеся відображати плаваючі вікна або чат-бульбашки поверх платіжного інтерфейсу, оскільки це може запустити механізми безпеки, які перервуть транзакцію.

### Підказки щодо розташування NFC [#nfc-positioning-guidance]

Безконтактне зчитування карток залежить від NFC-антени пристрою, розташування якої відрізняється залежно від моделі.

* **Рекомендація:** Якщо можливо, покажіть у своєму застосунку *перед* викликом SDK коротку анімацію або підказку, яка покаже користувачеві, де на його конкретному пристрої розташований NFC-чип (зазвичай на задній панелі вгорі або по центру).

## Обробка результатів [#handling-results]

### Стан успіху [#success-state]

* **Візуальне підтвердження:** Покажіть чіткий екран «Успішно» із зеленою галочкою або подібним позитивним елементом.
* **Чеки:** Одразу запропонуйте надіслати електронний чек (email/SMS) або надрукувати його, якщо під'єднано принтер.

### Стан помилки [#failure-state]

* **Зрозумілі повідомлення про помилки:** Якщо транзакція не вдалася, перетворіть технічні коди помилок на зрозумілу для користувача мову.
  * *Технічний код:* `DECLINED_INSUFFICIENT_FUNDS`
  * *Для користувача:* «Транзакцію відхилено. Перевірте баланс або спробуйте іншу картку.»
* **Можливість повторити:** Додайте помітну кнопку «Спробувати ще раз», щоб мерчант міг швидко перезапустити процес без повторного введення суми.

## Застосунок Tapaya Terminal [#tapaya-terminal-app]

Застосунок Tapaya Terminal дає мерчантам змогу самостійно приймати платежі карткою. Інтегратори можуть налаштувати досвід мерчантів у застосунку Tapaya Terminal; щоб почати, зв'яжіться з [developers@tapaya.com](mailto:developers@tapaya.com).

### Налаштування UI [#ui-customization]

Змінити UI застосунку Tapaya Terminal можна в Tapaya Platform у розділі **Settings > Application > App Theme** або програмно через [Platform API](/platform-api). Кольори та елементи бренду (логотип, текстові логотипи) застосовуються однаково в усьому застосунку Tapaya Terminal.

## Доступність [#accessibility]

* **Звук:** SDK відтворює звукові сигнали під час зчитування картки та в разі помилок. Переконайтеся, що ваш застосунок не вимикає системну гучність і не порушує роботу аудіофокуса під час платежу.
* **Тактильний відгук:** SDK використовує вібрацію для підтвердження зчитування картки. Це критично важливо для доступності та загального зворотного зв'язку в шумному середовищі.