Прослушайте GET callback во всплывающем окне JS - PullRequest
Новая
       1

Прослушайте GET callback во всплывающем окне JS

2 голосов
/ 07 февраля 2020

У меня есть платежная платформа REDSYS, которая при успешной оплате перенаправляет на URL обратного вызова (определенный мной). На этот URL отправляется запрос GET с результатом платежа, чтобы проверить его правильность.

Теперь я переадресовываю на мой веб «https://myhost.com/redsyscallback» . При загрузке эта страница подписывается на событие сообщения, если сообщение «isCallBackResult?» отвечает на него запросом get.

Основная страница, открывшая всплывающее окно, отправляет сообщение сообщение «isCallBackResult?» для всплывающего окна с интервалом в 500 мс, и оно подписывается на событие сообщения, которое будет запросом get из всплывающего ответного сообщения.

Работает нормально Но я знаю, что это не лучший способ. Может ли кто-нибудь помочь мне реализовать каким-либо другим способом?

Код главной страницы: 

    const host =
        window.location.protocol +
        '//' +
        window.location.hostname +
        (window.location.port ? ':' + window.location.port : '');

    let newWin = window.open(
        'about:blank',
        'Redirigiendo...',
        'width=800,height=700'
    );

    newWin.addEventListener(
        'load',
        function() {
            //Generated POST form wich redirect to the payment page
            var form = newWin.document.createElement('form');
            form.setAttribute('method', 'post');
            form.setAttribute('action', redsysForm.url);

            //API data
            let params = {
                Ds_SignatureVersion: redsysForm.body.Ds_SignatureVersion,
                Ds_MerchantParameters: redsysForm.body.Ds_MerchantParameters,
                Ds_Signature: redsysForm.body.Ds_Signature
            };

            for (var i in params) {
                if (params.hasOwnProperty(i)) {
                    var input = newWin.document.createElement('input');
                    input.type = 'hidden';
                    input.name = i;
                    input.value = params[i];
                    form.appendChild(input);
                }
            }
            newWin.document.body.appendChild(form);

            form.submit();

            let interval = setInterval(function() {
                if (newWin.closed) clearInterval(interval);
                console.log('interval');
                newWin.postMessage({ type: 'isCallBackResult?' }, host);
            }, 500);

            window.addEventListener('message', function handler(event) {
                if (event.data.type == 'callBackResult') {
                    clearInterval(interval);
                    event.source.close();
                    const result = redsys.processNotification(event.data.data);
                    window.removeEventListener('message', handler);
                }
            });
        },
        false
    );

Код страницы обратного вызова 

   const host =
      window.location.protocol +
      '//' +
      window.location.hostname +
      (window.location.port ? ':' + window.location.port : '');

    window.addEventListener('message', event => {
        if (event.data.type == 'isCallBackResult?') {
            event.source.postMessage(
                {
                    type: 'callBackResult',
                    data: this.$route.query //The GET Query by VUE
                },
                host
            );
        }
    });
...