1

在结帐卡支付提供商完成 3D 安全授权后，我需要与重定向页面通信。因为我不想更改父窗口位置，所以我有这样的设置

/payment.tsx

这是打开 3DS 身份验证 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' && 'key' in event.data) {
            if (typeof event.data === 'object' && 'key' in event.data && event.data.key === 'redirect') {
                console.log(event.data, 'Received From Redirect Window')
                redirectWindow?.close()
            }
        })
    }, [])

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

下一页/redirect是 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>
}

这样做的目的是在 Checkout 3DS 完成后通过向 /payment 发送消息来关闭 /redirect 窗口并返回到应用程序。此设置可能不是一种可行的方法，因此欢迎提供反馈。但目前我无法收到从 /redirect 发送的任何消息，因此无法关闭窗口。

示例代码可以在CodeSandbox中找到

4

0 回答 0