Блог

Мне нужно связаться со страницей перенаправления после завершения авторизации 3D secure поставщиком платежных карт. Поскольку я не хочу менять расположение родительского окна, у меня есть такая настройка

/payment.tsx

Это страница, которая открывает новое окно для 3DS Auth URL

 export default function IndexPage() {
    useEffect(() => {
        //redirect will be replaced by 3d secure url
        // which after 3ds completes will redirect to /redirect
        const redirectWindow = window.open('/redirect')

        //I assume message posted by /redirect will be recieved here
        window.addEventListener('message', (event) => {
            //  if (typeof event.data === 'object' amp;amp; 'key' in event.data) {
            if (typeof event.data === 'object' amp;amp; 'key' in event.data amp;amp; event.data.key === 'redirect') {
                console.log(event.data, 'Received From Redirect Window')
                redirectWindow?.close()
            }
        })
    }, [])

    return <div>Waiting for Redirect to send message</div>
}
  

Следующая страница / перенаправление, куда 3DS вернется после успеха или неудачи

 import { useEffect } from 'react'

export default () => {
    useEffect(() => {
        window.addEventListener('message', (event) => {
            console.log(event)
            event.source?.postMessage({ key: 'redirect', message: 'Hi' }, '*')
            //}
        })
    }, [])
    return <div>Transaction Successfull I should be closed by my Parent Window</div>
}
  

Цель этого — закрыть окно / redirect, отправив сообщение в / payment после завершения оформления заказа 3DS и возврата в приложение. Эта настройка может оказаться невыполнимой, поэтому обратная связь приветствуется. Но на данный момент я не могу получить какое-либо сообщение, отправленное из / redirect, или, следовательно, не могу закрыть окно.

Пример кода можно найти в CodeSandbox