forked from 77media/video-flow
53 lines
2.2 KiB
TypeScript
53 lines
2.2 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
|
||
export default function PayRedirectPage() {
|
||
const [status, setStatus] = React.useState<string>("等待安全收银台跳转...");
|
||
const [error, setError] = React.useState<string>("");
|
||
|
||
React.useEffect(() => {
|
||
const handleMessage = (event: MessageEvent) => {
|
||
try {
|
||
if (event.origin !== window.location.origin) return;
|
||
const data = event.data || {};
|
||
if (data?.type === "redirect-to-payment" && typeof data?.url === "string") {
|
||
setStatus("即将跳转到 Stripe 收银台...");
|
||
window.location.href = data.url as string;
|
||
} else if (data?.type === "redirect-error") {
|
||
setError(typeof data?.message === "string" ? data.message : "创建支付失败，请关闭此页重试");
|
||
}
|
||
} catch {
|
||
setError("处理跳转信息时发生错误，请关闭此页重试");
|
||
}
|
||
};
|
||
|
||
window.addEventListener("message", handleMessage);
|
||
// 超时兜底：若 15 秒内未收到跳转指令，提示用户
|
||
const timeoutId = window.setTimeout(() => {
|
||
setStatus("");
|
||
setError("未收到跳转指令，可能网络异常或页面被拦截。请返回重试。");
|
||
}, 15000);
|
||
|
||
return () => {
|
||
window.removeEventListener("message", handleMessage);
|
||
window.clearTimeout(timeoutId);
|
||
};
|
||
}, []);
|
||
|
||
return (
|
||
<div data-alt="pay-redirect-page" className="min-h-screen w-full flex items-center justify-center bg-black text-white">
|
||
<div data-alt="pay-redirect-card" className="max-w-md w-full p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur">
|
||
<h1 className="text-lg font-semibold mb-2">正在准备跳转</h1>
|
||
{status && <p className="text-sm text-white/80 mb-2">{status}</p>}
|
||
{error && <p className="text-sm text-red-300">{error}</p>}
|
||
{!error && (
|
||
<p className="text-xs text-white/60 mt-2">如长时间未跳转，请返回原页重试或检查网络。</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|