Goal:

Реализовать механизм уведомления host окна об изменении статуса внутри paymenthub iframe.

Бизнес цель

У нас есть форма быстрого депозита пример, которая позволяет на платформе nextcode загрузить платежный фрейм, до фактической инициализации nextcode платформы (в том числе и до авторизации пользователя на платформе). Это позволяет существенно сократить время ожидания пользователя. Однако при этом возникает проблема, что если человек совершает депозит - он остается висеть на экране платежного фрейма, с надписью - спасибо за ваш платеж. Хотелось бы, чтобы человека после успешного платежа редиректило уже на nextcode платформу и он мог играть. Соответственно нам нужно получить от фрейма информацию о наступлении события, после которого оригинальную вкладку можно закрывать.

Таких событий у нас 4:

  • произошло открытие платежной формы в новой табе
  • произошел успешный платеж
  • произошел не успешный платеж
  • произошел или нет платеж мы не знаем - pending статус

sequence diagram для флоу платежа

На диаграмме изображены пути взаимодействия игрока с платформой. Важно: есть две точки логического ветвления, помеченные alt на диаграмме.

Нас интересуют шаги:

  • 6: на шаге #6 мы мы показываем человеку сообщение, о том что окно может быть закрыто (фактически человек переходит в новый таб, в котором уже открывается платежная форма psp)
  • 11,12,13: на этих шагах мы показываем человеку сообщение, о том как завершился его платеж.

Мы бы хотели, чтобы платежный виджет сообщал о переходе в эти состояния, используя window.postMessage.

Пример использования:

window.postMessage("paymenthub:payment-success")

Это апи, позволяет хост окну, вызвашему iframe получить это сообщение. Для упрощения интеграции предлагается префиксировать все сообщения от paymenthub константной строкой: paymenthub:. В таком случае на клиенте будет легко отфильтровать сообщения от paymenthub от сообщений получаемых от игр к примеру.

Предлагается использовать 4 сообщения:

  • paymenthub:user-forwarder - для состояния 6 (открыли новую табу с psp)
  • paymenthub:payment-success - для состояния 11 (успешный платеж)
  • paymenthub:payment-error - для состояния 12 (не успешный платеж)
  • paymenthub:payment-pending - для состояния 13 (pending)

Хост окно

В хост окне мы разместим скрипт вида:

window.addEventListener("message", (event) => {
  if (event.data.startswith("paymenthub:") redirectToNextCode()
}

так же при необходимости мы сможем редиректить человека в разные места на платформе nextcode, в зависимости от статуса платежа.