forked from 77media/video-flow
58 lines
2.5 KiB
TypeScript
58 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { TailwindSpinner } from "@/components/common/GlobalLoad";
|
|
|
|
export default function PayRedirectPage() {
|
|
const [status, setStatus] = React.useState<string>("Waiting for secure checkout redirect...");
|
|
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("Redirecting to Stripe Checkout...");
|
|
window.location.href = data.url as string;
|
|
} else if (data?.type === "redirect-error") {
|
|
setError(typeof data?.message === "string" ? data.message : "Failed to create payment. Please close this page and try again.");
|
|
}
|
|
} catch {
|
|
setError("An error occurred while processing redirect info. Please close this page and try again.");
|
|
}
|
|
};
|
|
|
|
window.addEventListener("message", handleMessage);
|
|
const timeoutId = window.setTimeout(() => {
|
|
setStatus("");
|
|
setError("No redirect instruction received. It may be a network issue or the page was blocked. Please go back and try again.");
|
|
}, 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">Preparing to redirect</h1>
|
|
{status && <p className="text-sm text-white/80 mb-2">{status}</p>}
|
|
{!error && (
|
|
<div data-alt="loading-indicator" className="flex items-center justify-center my-3">
|
|
<TailwindSpinner diameter={40} />
|
|
</div>
|
|
)}
|
|
{error && <p className="text-sm text-red-300">{error}</p>}
|
|
{!error && (
|
|
<p className="text-xs text-white/60 mt-2">If it takes too long, please return to the previous page or check your network.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|