77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
// app/connect/stripe/page.tsx
|
||
//
|
||
// STEP 2 — Connect Stripe
|
||
// Purpose:
|
||
// - Explain why Stripe access is needed
|
||
// - Provide a single, clear action
|
||
// - Feel safe, boring, and familiar (Zapier-style)
|
||
|
||
import { cookies } from "next/headers";
|
||
import { redirect } from "next/navigation";
|
||
|
||
export default async function ConnectStripePage() {
|
||
const cookieStore = await cookies();
|
||
const session = cookieStore.get("session");
|
||
|
||
// Safety: if not logged in, bounce to login
|
||
if (!session) {
|
||
redirect("/login");
|
||
}
|
||
|
||
return (
|
||
<main className="max-w-2xl mx-auto p-8 space-y-10">
|
||
{/* --------------------------------------------------
|
||
Header
|
||
-------------------------------------------------- */}
|
||
<section>
|
||
<h1 className="text-2xl font-semibold">
|
||
Connect Stripe
|
||
</h1>
|
||
|
||
<p className="mt-3 text-gray-700">
|
||
We need read-only access to your Stripe account so we can
|
||
detect successful payments and automatically reconcile
|
||
invoices in Xero.
|
||
</p>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
What will happen
|
||
-------------------------------------------------- */}
|
||
<section>
|
||
<h2 className="text-lg font-medium">
|
||
What happens next
|
||
</h2>
|
||
|
||
<ul className="mt-3 space-y-2 list-disc list-inside text-gray-700">
|
||
<li>You’ll be redirected to Stripe</li>
|
||
<li>You’ll choose which Stripe account to connect</li>
|
||
<li>You’ll be sent back here once connected</li>
|
||
</ul>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
Trust / reassurance
|
||
-------------------------------------------------- */}
|
||
<section className="text-sm text-gray-600">
|
||
<p>
|
||
We never see your passwords.
|
||
<br />
|
||
Access can be revoked at any time from Stripe.
|
||
</p>
|
||
</section>
|
||
|
||
{/* --------------------------------------------------
|
||
Primary action
|
||
-------------------------------------------------- */}
|
||
<section className="pt-4 border-t">
|
||
<a
|
||
href="/api/stripe/connect"
|
||
className="inline-block px-6 py-3 bg-black text-white rounded text-sm"
|
||
>
|
||
Connect Stripe →
|
||
</a>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|