Page History

Интеграция

Это код вашего виджета. Скопируйте и вставьте его в код тех страниц, на которых вы хотите принимать платежи. Необходимосамостоятельнозаполнитьпараметры:

<iframe id="kassma-plugin-frame" src="httpsshttps://domen_nameplugin.domain/? label=label¤cylabel&currency_code=currency_code&lang=lang&wallet_type=wallet_type &custom_transaction_id=custom_transaction_id&fixed_amount=fixed_amount &payment_url_success_id=payment_url_success_id&payment_url_fail_id=payment_url_fail_id "_id&success_url=success_url&payment_url_pending_id=payment_url_pending_id&pending_url=pending_url&fail_url=fail_url" width="640" height="750" frameBorder="0"></iframe>
<script>document.querySelector('#kassma-plugin-frame').src += '&' + new Date().getTime();</script>

Расшифровка параметров: 

*Таблица экранирования:

В случае возникновения ошибки, на плагине отобразится окно с кодом ошибки. При этом, для решения проблемы, необходимо обратиться в службу поддержки Paykassma и сообщить код ошибки. Ниже представлена таблица с расшифровкой кодов ошибок 

Ввод через Плагин

Внимание: Плагин имеет динамическую верстку и адаптирован для работы на диапазоне устройств, включающий в том числе, планшеты и мобильные телефоны

Пример 1:

1. Пользователь попадает в платёжное окно на страницу выбора платежной системы.
   
2. Пользователь выбирает платежную систему, в первом случае рассмотрим пример ввода через платежную систему PayTM
              

     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" → кнопка вернет пользователя на форму активации транзакции для повторной попытки активации.
                   Image Added

          2.3 В некоторых случаях, .3 В случае, если на сервере включен функционал "Отложенной автоматической активации" и при не правильном вводе подтверждающих транзакцию данных, то при попытки активации транзакции, возможно отображение следующего окна (подробнее o о функционале "Возможные транзакцииОтложенная автоматическая активация"): 

                   * Пожалуйста, проверьте идентификатор транзакции, если вы все ввели правильно, ваши средства будут зачислены в течение 2 часов. Если вы допустили ошибку при вводе идентификатора транзакции, попробуйте еще раз.

         При нажатии на кнопку "Refresh", пользователя перенаправит на URL успешной оплаты. URL указывается в настройках.

Пример 2:

1. Пользователь попадает в платёжное окно на страницу выбора платежной системы.
   
   
2. Пользователь выбирает платежную систему, отличную от PayTM  

       2.1. Отображается окно ввода суммы
             

       2.2 После ввода суммы и нажатия кнопки “Next”, отображается окно подтверждения данных
             

       22.3 После подтверждения, происходит перенаправление пользователя на страницу оплаты
             

Внимание: Контроль за транзакциями и их статусами всегда можно осуществить в ЛК, меню «Транзакции». В данном разделе отобразится сформированная выше транзакция со статусом "Активирована".

Кастомизация плагина

Для качественного кода и дальнейших безболезненных изменений ваших стилей, рекомендуется не использовать !important в стилях. Вместо этого советуем вам переопределять приоритеты путем добавления родительского селектора

Чтобы создать свою тему для плагина и/или изменить размер полей на плагине, необходимо создать файл в формате *.css и выполнить его загрузку через настройки Paykassma (подробнее см. описание раздела Настройки плагина)

1. Скачайте шаблон CSS-файла ( Ссылка на CSS файл доступна по запросу через ТП Paykassma)
2. Внесите изменения в соответствии с приведенными примерами
3. Выполните загрузку полученного css файла через настройки Paykassma

Примеры кастомизации

Image Removed

Изменение цвета фона

Image Added

Рисунок 1. Варианты отображения внешнего вида плагина

Image Removed

Изменение цвета текста

Image Added

Рисунок 2. Варианты отображения внешнего вида окна кошелька 

Image Removed

Стили для заголовков первого уровня

Image Added
Рисунок 3. Варианты отображения заголовков окон

Image Removed

Стили для отображения платежной системы

Image Added
Рисунок 4. Варианты отображения платежных систем

Image Removed

Стили текста для наименования платежной системы

Image Added
Рисунок 5. Варианты отображения наименования платежных систем

Image Removed

Изменение цвета фона для выпадающих элементов списка

Image Added
Рисунок 6. Варианты отображения внешнего вида окна платежей

Image Removed

Стили для фона иконок

Image Added
Рисунок 7. Варианты отображения окна подтверждения платежа

Image Removed
Рис 8. Варианты отображения кнопок

Image Removed
Рис 9. Варианты отображения кнопок в информационном окне

Стили для кнопок

Для изменения стиля кнопки "Back" дополните CSS-файл следующим кодом:

.app--custom .button {
  background-color: #1368d8;
  border-color: #1368d8;
  color: #fff;
}

Image Added
Рисунок 8. Вариант отображения кнопки "Back"

Image Added
Рисунок 9. Вариант отображения главной кнопки

Стили для полей

Image Added
Рисунок

Image Removed

10. Варианты отображения поля «Кошелек»

Image Removed

Стили для лейблов полей

Image Added
Рисунок 11. Варианты отображения надписей

Image Removed
Рис 12. Варианты отображения кнопок

Стили для кнопки "Копировать"

Для изменения размера кнопки "Копировать" дополните CSS-файл следующим кодом:

.app--custom .copy-text-input-btn {
    min-width: 62px
}

Image Added
Рисунок 12. Изменение размера кнопки "Копировать"

Стили поля "Amount"

Image Added
Рисунок

Image Removed

13. Варианты отображения полей

Image Removed

Стили поля "Card expiration"

Image Added
Рисунок 14. Варианты отображения выпадающего списка

Внимание: Ссылка на CSS файл доступна по запросу через ТП Paykassma.

< Вернуться на главную