*Таблица экранирования:
Символ | Название символа | Экранированный символ |
! | Восклицательный знак | %21 |
\ | Обратный слэш (бэкслэш) | %5C |
" | Двойная кавычка | %22 |
% | Знак процента | %25 |
& | Амперсанд | %26 |
' | Одинарная кавычка (апостроф) | %27 |
* | Звёздочка | %2A |
+ | Плюс | %2B |
- | Минус (тире) | %2D |
. | Точка | %2E |
/ | Слэш | %2F |
_ | Нижнее подчёркивание | %5F |
, | Запятая | %2C |
: | Двоеточие | %3A |
; | Точка с запятой | %3B |
= | Равно | %3D |
< | Меньше | %3C |
> | Больше | %3E |
? | Вопросительный знак | %3F |
( | Открывающаяся скобка | %28 |
) | Закрывающаяся скобка | %29 |
В случае возникновения ошибки, на плагине отобразится окно с кодом ошибки. При этом, для решения проблемы, необходимо обратиться в службу поддержки Paykassma и сообщить код ошибки. Ниже представлена таблица с расшифровкой кодов ошибок
|
Внимание: Плагин имеет динамическую верстку и адаптирован для работы на диапазоне устройств, включающий в том числе, планшеты и мобильные телефоны
Пример 1:
2.1 После ввода суммы и нажатия кнопки “Next”, отображается окно с информацией о кошельке на который необходимо совершить перевод денежных средств
Так же в окне отображения кошелька, имеется информация о минимальном и максимальном депозите и подсказка о совершении платежа.
2.2 Далее, после нажатия кнопки “Next”, отображается окно, в котором необходимо указать Transaction ID, полученный пользователем при выполнении перевода
2.3 После ввода Transaction ID и подтверждения, производится поиск транзакции в системе
2.3.1 Если транзакция имеется в системе, то пользователя перенаправляет на URL успешной оплаты. URL указывается в настройках.
2.3.2 Если транзакции нет в системе, то пользователю отобразится окно с текстом: "Transaction not found or was already activated. Please retry later." и две кнопки. "Refresh" → кнопка перенаправит пользователя по URL неуспешной оплаты и "Retry" → кнопка вернет пользователя на форму активации транзакции для повторной попытки активации.
2.3.3 В случае, если на сервере включен функционал "Отложенной автоматической активации" и при не правильном вводе подтверждающих транзакцию данных, то при попытки активации транзакции, возможно отображение следующего окна (подробнее о функционале "Отложенная автоматическая активация"):
* Пожалуйста, проверьте идентификатор транзакции, если вы все ввели правильно, ваши средства будут зачислены в течение 2 часов. Если вы допустили ошибку при вводе идентификатора транзакции, попробуйте еще раз.
При нажатии на кнопку "Refresh", пользователя перенаправит на URL успешной оплаты. URL указывается в настройках.
Пример 2:
2.1. Отображается окно ввода суммы
2.2 После ввода суммы и нажатия кнопки “Next”, отображается окно подтверждения данных
2.3 После подтверждения, происходит перенаправление пользователя на страницу оплаты
Внимание: Контроль за транзакциями и их статусами всегда можно осуществить в ЛК, меню «Транзакции». В данном разделе отобразится сформированная выше транзакция со статусом "Активирована".
Чтобы создать свою тему для плагина и/или изменить размер полей на плагине, необходимо создать файл в формате *.css и выполнить его загрузку через настройки Paykassma (подробнее см. описание раздела Настройки плагина)
Ниже приведены скриншоты областей влияния, указанные в css файле. В примере приведены лишь наиболее распространенные изменения в плагине. Вы можете не ограничиваться ими, создавая более уникальные интерфейсы. |
Рисунок 1. Варианты отображения внешнего вида плагина
Рисунок 2. Варианты отображения внешнего вида окна кошелька
Рисунок 3. Варианты отображения заголовков окон
Рисунок 4. Варианты отображения платежных систем
Рисунок 5. Варианты отображения наименования платежных систем
Рисунок 6. Варианты отображения внешнего вида окна платежей
Рисунок 7. Варианты отображения окна подтверждения платежа
Для изменения стиля кнопки "Back" дополните CSS-файл следующим кодом:
.app--custom .button { background-color: #1368d8; border-color: #1368d8; color: #fff; } |
Рисунок 8. Вариант отображения кнопки "Back"
Рисунок 9. Вариант отображения главной кнопки
Рисунок 10. Варианты отображения поля «Кошелек»
Рисунок 11. Варианты отображения надписей
Для изменения размера кнопки "Копировать" дополните CSS-файл следующим кодом:
.app--custom .copy-text-input-btn { min-width: 62px } |
Рисунок 12. Изменение размера кнопки "Копировать"
Рисунок 13. Варианты отображения полей
На проекте подключен плагин для combobox. Более подробно о стилизации таких полей можете прочитать на сайте https://jquense.github.io/react-widgets/api/Combobox/ Ниже приведен пример по его стилизации. На данный момент он используется для поля "Card expiration". |
Рисунок 14. Варианты отображения выпадающего списка