feat(app): implement payment processing with Stripe integration, including checkout and payment elements, and update project structure and dependencies

.env.local.example

···
+# Stripe keys
+# https://dashboard.stripe.com/apikeys
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_12345
+STRIPE_SECRET_KEY=sk_12345
+STRIPE_PAYMENT_DESCRIPTION='Software development services'
+# https://stripe.com/docs/webhooks/signatures
+STRIPE_WEBHOOK_SECRET=whsec_1234

README.md

···
-# eny.space
+# Easy PDS
+
+A full-stack TypeScript application using Next.js for processing donations.
+
+## Features
+
+- **Checkout** - Custom amount donations with hosted and embedded checkout
+- **Payment Elements** - Custom payment form with Payment Element
+- **Webhook handling** - Server-side webhook processing for payment events
+
+## Tech Stack
+
+- **Frontend**: Next.js, React, TypeScript
+- **Backend**: Next.js Server Actions and Route Handlers
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ installed
+- A payment processor account
+
+### Installation
+
+1. Clone the repository and install dependencies:
+
+```bash
+npm install
+# or
+yarn install
+# or
+pnpm install
+```
+
+2. Set up environment variables:
+
+Create a `.env.local` file in the root directory:
+
+```bash
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_publishable_key
+STRIPE_SECRET_KEY=your_secret_key
+STRIPE_WEBHOOK_SECRET=your_webhook_secret
+```
+
+Get your API keys from your payment processor dashboard.
+
+3. Start the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+The application will be available at `http://localhost:3000`.
+
+### Webhook Setup
+
+#### Local Development
+
+1. Install the payment processor CLI and link your account.
+
+2. Start webhook forwarding to your local server:
+
+```bash
+# Example command - adjust based on your payment processor
+webhook listen --forward-to localhost:3000/api/webhooks
+```
+
+3. Copy the webhook secret from the CLI output and add it to your `.env.local` file.
+
+#### Production
+
+1. Deploy your application and copy the webhook URL (e.g., `https://your-domain.com/api/webhooks`).
+
+2. Create a webhook endpoint in your payment processor dashboard.
+
+3. Add the webhook signing secret to your production environment variables.
+
+## Testing
+
+Use test cards for testing payments. Common test cards:
+- `4242 4242 4242 4242` - Successful payment
+- `4000 0027 6000 3184` - 3D Secure authentication required
+
+## Deployment
+
+This application can be deployed to any platform that supports Next.js, such as [Vercel](https://vercel.com), Netlify, or your own infrastructure.
+
+Make sure to set all required environment variables in your deployment platform.
+
+## Project Structure
+
+- `app/` - Next.js app directory with pages and components
+- `app/actions/` - Server actions for payment operations
+- `app/api/webhooks/` - Webhook handler route
+- `lib/` - Payment processor client configuration
+- `components/` - React components for payment forms
+- `utils/` - Utility functions

app/actions/stripe.ts

···
+"use server";
+
+import type { Stripe } from "stripe";
+
+import { headers } from "next/headers";
+
+import { CURRENCY } from "@/config";
+import { formatAmountForStripe } from "@/utils/stripe-helpers";
+import { stripe } from "@/lib/stripe";
+
+export async function createCheckoutSession(
+  data: FormData,
+): Promise<{ client_secret: string | null; url: string | null }> {
+  const ui_mode = data.get(
+    "uiMode",
+  ) as Stripe.Checkout.SessionCreateParams.UiMode;
+
+  const headersList = await headers();
+  const originHeader = headersList.get("origin");
+  const hostHeader = headersList.get("host");
+  
+  let origin: string;
+  if (originHeader) {
+    origin = originHeader;
+  } else if (hostHeader) {
+    origin = `https://${hostHeader}`;
+  } else {
+    origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+  }
+
+  const checkoutSession: Stripe.Checkout.Session =
+    await stripe.checkout.sessions.create({
+      mode: "payment",
+      submit_type: "donate",
+      line_items: [
+        {
+          quantity: 1,
+          price_data: {
+            currency: CURRENCY,
+            product_data: {
+              name: "Custom amount donation",
+            },
+            unit_amount: formatAmountForStripe(
+              Number(data.get("customDonation") as string),
+              CURRENCY,
+            ),
+          },
+        },
+      ],
+      ...(ui_mode === "hosted" && {
+        success_url: `${origin}/donate-with-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+        cancel_url: `${origin}/donate-with-checkout`,
+      }),
+      ...(ui_mode === "embedded" && {
+        return_url: `${origin}/donate-with-embedded-checkout/result?session_id={CHECKOUT_SESSION_ID}`,
+      }),
+      ui_mode,
+    });
+
+  return {
+    client_secret: checkoutSession.client_secret,
+    url: checkoutSession.url,
+  };
+}
+
+export async function createPaymentIntent(
+  data: FormData,
+): Promise<{ client_secret: string }> {
+  const paymentIntent: Stripe.PaymentIntent =
+    await stripe.paymentIntents.create({
+      amount: formatAmountForStripe(
+        Number(data.get("customDonation") as string),
+        CURRENCY,
+      ),
+      automatic_payment_methods: { enabled: true },
+      currency: CURRENCY,
+    });
+
+  return { client_secret: paymentIntent.client_secret as string };
+}

app/api/webhooks/route.ts

···
+import type { Stripe } from "stripe";
+
+import { NextResponse } from "next/server";
+
+import { stripe } from "@/lib/stripe";
+
+export async function POST(req: Request) {
+  let event: Stripe.Event;
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      await (await req.blob()).text(),
+      req.headers.get("stripe-signature") as string,
+      process.env.STRIPE_WEBHOOK_SECRET as string,
+    );
+  } catch (err) {
+    const errorMessage = err instanceof Error ? err.message : "Unknown error";
+    // On error, log and return the error message.
+    if (!(err instanceof Error)) console.log(err);
+    console.log(`❌ Error message: ${errorMessage}`);
+    return NextResponse.json(
+      { message: `Webhook Error: ${errorMessage}` },
+      { status: 400 },
+    );
+  }
+
+  // Successfully constructed event.
+  console.log("✅ Success:", event.id);
+
+  const permittedEvents: string[] = [
+    "checkout.session.completed",
+    "payment_intent.succeeded",
+    "payment_intent.payment_failed",
+  ];
+
+  if (permittedEvents.includes(event.type)) {
+    let data;
+
+    try {
+      switch (event.type) {
+        case "checkout.session.completed":
+          data = event.data.object as Stripe.Checkout.Session;
+          console.log(`💰 CheckoutSession status: ${data.payment_status}`);
+          break;
+        case "payment_intent.payment_failed":
+          data = event.data.object as Stripe.PaymentIntent;
+          console.log(`❌ Payment failed: ${data.last_payment_error?.message}`);
+          break;
+        case "payment_intent.succeeded":
+          data = event.data.object as Stripe.PaymentIntent;
+          console.log(`💰 PaymentIntent status: ${data.status}`);
+          break;
+        default:
+          throw new Error(`Unhandled event: ${event.type}`);
+      }
+    } catch (error) {
+      console.log(error);
+      return NextResponse.json(
+        { message: "Webhook handler failed" },
+        { status: 500 },
+      );
+    }
+  }
+  // Return a response to acknowledge receipt of the event.
+  return NextResponse.json({ message: "Received" }, { status: 200 });
+}

app/components/CheckoutForm.tsx

···
+"use client";
+
+import type Stripe from "stripe";
+
+import React, { useState } from "react";
+
+import CustomDonationInput from "@/components/CustomDonationInput";
+import TestCards from "@/components/TestCards";
+
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
+import * as config from "@/config";
+import { createCheckoutSession } from "@/actions/stripe";
+import getStripe from "@/utils/get-stripejs";
+import {
+  EmbeddedCheckout,
+  EmbeddedCheckoutProvider,
+} from "@stripe/react-stripe-js";
+
+interface CheckoutFormProps {
+  uiMode: Stripe.Checkout.SessionCreateParams.UiMode;
+}
+
+export default function CheckoutForm(props: CheckoutFormProps): JSX.Element {
+  const [loading] = useState<boolean>(false);
+  const [input, setInput] = useState<{ customDonation: number }>({
+    customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
+  });
+  const [clientSecret, setClientSecret] = useState<string | null>(null);
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (
+    e,
+  ): void =>
+    setInput({
+      ...input,
+      [e.currentTarget.name]: e.currentTarget.value,
+    });
+
+  const formAction = async (data: FormData): Promise<void> => {
+    const uiMode = data.get(
+      "uiMode",
+    ) as Stripe.Checkout.SessionCreateParams.UiMode;
+    const { client_secret, url } = await createCheckoutSession(data);
+
+    if (uiMode === "embedded") return setClientSecret(client_secret);
+
+    window.location.assign(url as string);
+  };
+
+  return (
+    <>
+      <form action={formAction}>
+        <input type="hidden" name="uiMode" value={props.uiMode} />
+        <CustomDonationInput
+          className="checkout-style"
+          name="customDonation"
+          min={config.MIN_AMOUNT}
+          max={config.MAX_AMOUNT}
+          step={config.AMOUNT_STEP}
+          currency={config.CURRENCY}
+          onChange={handleInputChange}
+          value={input.customDonation}
+        />
+        <TestCards />
+        <button
+          className="checkout-style-background"
+          type="submit"
+          disabled={loading}
+        >
+          Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
+        </button>
+      </form>
+      {clientSecret ? (
+        <EmbeddedCheckoutProvider
+          stripe={getStripe()}
+          options={{ clientSecret }}
+        >
+          <EmbeddedCheckout />
+        </EmbeddedCheckoutProvider>
+      ) : null}
+    </>
+  );
+}

app/components/CustomDonationInput.tsx

···
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
+
+export default function CustomDonationInput({
+  name,
+  min,
+  max,
+  currency,
+  step,
+  onChange,
+  value,
+  className,
+}: {
+  name: string;
+  min: number;
+  max: number;
+  currency: string;
+  step: number;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  value: number;
+  className?: string;
+}): JSX.Element {
+  return (
+    <label>
+      Custom donation amount ({formatAmountForDisplay(min, currency)}-
+      {formatAmountForDisplay(max, currency)}):
+      <input
+        type="range"
+        name={name}
+        min={min}
+        max={max}
+        step={step}
+        onChange={onChange}
+        value={value}
+        className={className}
+      ></input>
+    </label>
+  );
+}

app/components/ElementsForm.tsx

···
+"use client";
+
+import type { StripeError } from "@stripe/stripe-js";
+
+import * as React from "react";
+import {
+  useStripe,
+  useElements,
+  PaymentElement,
+  Elements,
+} from "@stripe/react-stripe-js";
+
+import CustomDonationInput from "./CustomDonationInput";
+import TestCards from "./TestCards";
+
+import { formatAmountForDisplay } from "@/utils/stripe-helpers";
+import * as config from "@/config";
+import getStripe from "@/utils/get-stripejs";
+import { createPaymentIntent } from "@/actions/stripe";
+
+function CheckoutForm(): JSX.Element {
+  const [input, setInput] = React.useState<{
+    customDonation: number;
+    cardholderName: string;
+  }>({
+    customDonation: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
+    cardholderName: "",
+  });
+  const [paymentType, setPaymentType] = React.useState<string>("");
+  const [payment, setPayment] = React.useState<{
+    status: "initial" | "processing" | "error";
+  }>({ status: "initial" });
+  const [errorMessage, setErrorMessage] = React.useState<string>("");
+
+  const stripe = useStripe();
+  const elements = useElements();
+
+  const PaymentStatus = ({ status }: { status: string }) => {
+    switch (status) {
+      case "processing":
+      case "requires_payment_method":
+      case "requires_confirmation":
+        return <h2>Processing...</h2>;
+
+      case "requires_action":
+        return <h2>Authenticating...</h2>;
+
+      case "succeeded":
+        return <h2>Payment Succeeded 🥳</h2>;
+
+      case "error":
+        return (
+          <>
+            <h2>Error 😭</h2>
+            <p className="error-message">{errorMessage}</p>
+          </>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    setInput({
+      ...input,
+      [e.currentTarget.name]: e.currentTarget.value,
+    });
+
+    elements?.update({ amount: input.customDonation * 100 });
+  };
+
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = async (e) => {
+    try {
+      e.preventDefault();
+      // Abort if form isn't valid
+      if (!e.currentTarget.reportValidity()) return;
+      if (!elements || !stripe) return;
+
+      setPayment({ status: "processing" });
+
+      const { error: submitError } = await elements.submit();
+
+      if (submitError) {
+        setPayment({ status: "error" });
+        setErrorMessage(submitError.message ?? "An unknown error occurred");
+
+        return;
+      }
+
+      // Create a PaymentIntent with the specified amount.
+      const { client_secret: clientSecret } = await createPaymentIntent(
+        new FormData(e.target as HTMLFormElement),
+      );
+
+      // Confirm payment with the payment processor
+      const { error: confirmError } = await stripe!.confirmPayment({
+        elements,
+        clientSecret,
+        confirmParams: {
+          return_url: `${window.location.origin}/donate-with-elements/result`,
+          payment_method_data: {
+            billing_details: {
+              name: input.cardholderName,
+            },
+          },
+        },
+      });
+
+      if (confirmError) {
+        setPayment({ status: "error" });
+        setErrorMessage(confirmError.message ?? "An unknown error occurred");
+      }
+    } catch (err) {
+      const { message } = err as StripeError;
+
+      setPayment({ status: "error" });
+      setErrorMessage(message ?? "An unknown error occurred");
+    }
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <CustomDonationInput
+          className="elements-style"
+          name="customDonation"
+          value={input.customDonation}
+          min={config.MIN_AMOUNT}
+          max={config.MAX_AMOUNT}
+          step={config.AMOUNT_STEP}
+          currency={config.CURRENCY}
+          onChange={handleInputChange}
+        />
+        <TestCards />
+        <fieldset className="elements-style">
+          <legend>Your payment details:</legend>
+          {paymentType === "card" ? (
+            <input
+              placeholder="Cardholder name"
+              className="elements-style"
+              type="Text"
+              name="cardholderName"
+              onChange={handleInputChange}
+              required
+            />
+          ) : null}
+          <div className="FormRow elements-style">
+            <PaymentElement
+              onChange={(e) => {
+                setPaymentType(e.value.type);
+              }}
+            />
+          </div>
+        </fieldset>
+        <button
+          className="elements-style-background"
+          type="submit"
+          disabled={
+            !["initial", "succeeded", "error"].includes(payment.status) ||
+            !stripe
+          }
+        >
+          Donate {formatAmountForDisplay(input.customDonation, config.CURRENCY)}
+        </button>
+      </form>
+      <PaymentStatus status={payment.status} />
+    </>
+  );
+}
+
+export default function ElementsForm(): JSX.Element {
+  return (
+    <Elements
+      stripe={getStripe()}
+      options={{
+        appearance: {
+          variables: {
+            colorIcon: "#6772e5",
+            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
+          },
+        },
+        currency: config.CURRENCY,
+        mode: "payment",
+        amount: Math.round(config.MAX_AMOUNT / config.AMOUNT_STEP),
+      }}
+    >
+      <CheckoutForm />
+    </Elements>
+  );
+}

app/components/PrintObject.tsx

···
+import type { Stripe } from "stripe";
+
+export default function PrintObject({
+  content,
+}: {
+  content: Stripe.PaymentIntent | Stripe.Checkout.Session;
+}): JSX.Element {
+  const formattedContent: string = JSON.stringify(content, null, 2);
+  return <pre>{formattedContent}</pre>;
+}

app/components/StripeTestCards.tsx

···
+export default function StripeTestCards(): JSX.Element {
+  return (
+    <div className="test-card-notice">
+      Use test cards for testing, e.g.{" "}
+      <div className="card-number">
+        4242<span></span>4242<span></span>4242<span></span>4242
+      </div>
+      .
+    </div>
+  );
+}

app/components/TestCards.tsx

···
+export default function TestCards(): JSX.Element {
+  return (
+    <div className="test-card-notice">
+      Use test cards for testing, e.g.{" "}
+      <div className="card-number">
+        4242<span></span>4242<span></span>4242<span></span>4242
+      </div>
+      .
+    </div>
+  );
+}

app/donate-with-checkout/page.tsx

···
+import type { Metadata } from "next";
+
+import CheckoutForm from "@/components/CheckoutForm";
+
+export const metadata: Metadata = {
+  title: "Donate",
+};
+
+export default function DonatePage(): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Donate</h1>
+      <p>Donate to our project 💖</p>
+      <CheckoutForm uiMode="hosted" />
+    </div>
+  );
+}

app/donate-with-checkout/result/error.tsx

···
+"use client";
+
+export default function Error({ error }: { error: Error }) {
+  return <h2>{error.message}</h2>;
+}

app/donate-with-checkout/result/layout.tsx

···
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Checkout Session Result",
+};
+
+export default function ResultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Checkout Session Result</h1>
+      {children}
+    </div>
+  );
+}

app/donate-with-checkout/result/page.tsx

···
+import type { Stripe } from "stripe";
+
+import PrintObject from "@/components/PrintObject";
+import { stripe } from "@/lib/stripe";
+
+export default async function ResultPage({
+  searchParams,
+}: {
+  searchParams: { session_id: string };
+}): Promise<JSX.Element> {
+  if (!searchParams.session_id)
+    throw new Error("Please provide a valid session_id (`cs_test_...`)");
+
+  const checkoutSession: Stripe.Checkout.Session =
+    await stripe.checkout.sessions.retrieve(searchParams.session_id, {
+      expand: ["line_items", "payment_intent"],
+    });
+
+  const paymentIntent = checkoutSession.payment_intent as Stripe.PaymentIntent;
+
+  return (
+    <>
+      <h2>Status: {paymentIntent.status}</h2>
+      <h3>Checkout Session response:</h3>
+      <PrintObject content={checkoutSession} />
+    </>
+  );
+}

app/donate-with-elements/page.tsx

···
+import { redirect } from "next/navigation";
+
+export default function PaymentElementPage() {
+  redirect("/donate-with-checkout");
+}

app/donate-with-elements/result/error.tsx

···
+"use client";
+
+export default function Error({ error }: { error: Error }) {
+  return <h2>{error.message}</h2>;
+}

app/donate-with-elements/result/layout.tsx

···
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Payment Intent Result",
+};
+
+export default function ResultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Payment Intent Result</h1>
+      {children}
+    </div>
+  );
+}

app/donate-with-elements/result/page.tsx

···
+import type { Stripe } from "stripe";
+
+import PrintObject from "@/components/PrintObject";
+import { stripe } from "@/lib/stripe";
+
+export default async function ResultPage({
+  searchParams,
+}: {
+  searchParams: { payment_intent: string };
+}): Promise<JSX.Element> {
+  if (!searchParams.payment_intent)
+    throw new Error("Please provide a valid payment_intent (`pi_...`)");
+
+  const paymentIntent: Stripe.PaymentIntent =
+    await stripe.paymentIntents.retrieve(searchParams.payment_intent);
+
+  return (
+    <>
+      <h2>Status: {paymentIntent.status}</h2>
+      <h3>Payment Intent response:</h3>
+      <PrintObject content={paymentIntent} />
+    </>
+  );
+}

app/donate-with-embedded-checkout/page.tsx

···
+import { redirect } from "next/navigation";
+
+export default function DonatePage() {
+  redirect("/donate-with-checkout");
+}

app/donate-with-embedded-checkout/result/error.tsx

···
+"use client";
+
+export default function Error({ error }: { error: Error }) {
+  return <h2>{error.message}</h2>;
+}

app/donate-with-embedded-checkout/result/layout.tsx

···
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Checkout Session Result",
+};
+
+export default function ResultLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element {
+  return (
+    <div className="page-container">
+      <h1>Checkout Session Result</h1>
+      {children}
+    </div>
+  );
+}

app/donate-with-embedded-checkout/result/page.tsx

···
+import type { Stripe } from "stripe";
+
+import PrintObject from "@/components/PrintObject";
+import { stripe } from "@/lib/stripe";
+
+export default async function ResultPage({
+  searchParams,
+}: {
+  searchParams: { session_id: string };
+}): Promise<JSX.Element> {
+  if (!searchParams.session_id)
+    throw new Error("Please provide a valid session_id (`cs_test_...`)");
+
+  const checkoutSession: Stripe.Checkout.Session =
+    await stripe.checkout.sessions.retrieve(searchParams.session_id, {
+      expand: ["line_items", "payment_intent"],
+    });
+
+  const paymentIntent = checkoutSession.payment_intent as Stripe.PaymentIntent;
+
+  return (
+    <>
+      <h2>Status: {paymentIntent.status}</h2>
+      <h3>Checkout Session response:</h3>
+      <PrintObject content={checkoutSession} />
+    </>
+  );
+}

app/layout.tsx

···
+import type { Metadata } from "next";
+
+import "../styles.css";
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: {
+    default: "Easy PDS",
+    template: "%s | Easy PDS",
+  },
+  twitter: {
+    card: "summary_large_image",
+    description: "Easy PDS - Secure donation platform.",
+  },
+};
+
+export default function RootLayout({ children }: LayoutProps) {
+  return (
+    <html lang="en">
+      <body>
+        <div className="container">
+          <header>
+            <div className="header-content">
+              <h1>
+                Easy PDS
+              </h1>
+            </div>
+          </header>
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

app/page.tsx

···
+import type { Metadata } from "next";
+
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "Home",
+};
+
+export default function IndexPage(): JSX.Element {
+  return (
+    <ul className="card-list">
+      <li>
+        <Link
+          href="/donate-with-checkout"
+          className="card checkout-style-background"
+        >
+          <h2 className="bottom">Donate</h2>
+          <img src="/checkout-one-time-payments.svg" />
+        </Link>
+      </li>
+    </ul>
+  );
+}

components/Layout.tsx

···
-import React, { ReactNode } from "react";
-import Link from "next/link";
-import Head from "next/head";
-
-type Props = {
-  children?: ReactNode;
-  title?: string;
-};
-
-const Layout = ({ children, title = "This is the default title" }: Props) => (
-  <div>
-    <Head>
-      <title>{title}</title>
-      <meta charSet="utf-8" />
-      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
-    </Head>
-    <header>
-      <nav>
-        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{" "}
-        <Link href="/users">Users List</Link> |{" "}
-        <a href="/api/users">Users API</a>
-      </nav>
-    </header>
-    {children}
-    <footer>
-      <hr />
-      <span>I'm here to stay (Footer)</span>
-    </footer>
-  </div>
-);
-
-export default Layout;

components/List.tsx

···
-import * as React from "react";
-import ListItem from "./ListItem";
-import { User } from "../interfaces";
-
-type Props = {
-  items: User[];
-};
-
-const List = ({ items }: Props) => (
-  <ul>
-    {items.map((item) => (
-      <li key={item.id}>
-        <ListItem data={item} />
-      </li>
-    ))}
-  </ul>
-);
-
-export default List;

components/ListDetail.tsx

···
-import * as React from "react";
-
-import { User } from "../interfaces";
-
-type ListDetailProps = {
-  item: User;
-};
-
-const ListDetail = ({ item: user }: ListDetailProps) => (
-  <div>
-    <h1>Detail for {user.name}</h1>
-    <p>ID: {user.id}</p>
-  </div>
-);
-
-export default ListDetail;

components/ListItem.tsx

···
-import React from "react";
-import Link from "next/link";
-
-import { User } from "../interfaces";
-
-type Props = {
-  data: User;
-};
-
-const ListItem = ({ data }: Props) => (
-  <Link href="/users/[id]" as={`/users/${data.id}`}>
-    {data.id}:{data.name}
-  </Link>
-);
-
-export default ListItem;

config/index.ts

···
+export const CURRENCY = "usd";
+// Set your amount limits: Use float for decimal currencies and
+// Integer for zero-decimal currencies: https://stripe.com/docs/currencies#zero-decimal.
+export const MIN_AMOUNT = 10.0;
+export const MAX_AMOUNT = 5000.0;
+export const AMOUNT_STEP = 5.0;

interfaces/index.ts

···
-// You can include shared interfaces/types in a separate file
-// and then use them in any component by importing them. For
-// example, to import the interface below do:
-//
-// import { User } from 'path/to/interfaces';
-
-export type User = {
-  id: number;
-  name: string;
-};

lib/stripe.ts

···
+import "server-only";
+
+import Stripe from "stripe";
+
+export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
+  // https://github.com/stripe/stripe-node#configuration
+  apiVersion: "2023-10-16",
+});

next.config.js

···
+module.exports = {};

package-lock.json

···
 {
-  "name": "eny-space",
+  "name": "with-stripe-typescript-app",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "dependencies": {
-        "@stripe/stripe-js": "^8.6.0",
+        "@stripe/react-stripe-js": "2.4.0",
+        "@stripe/stripe-js": "2.2.2",
         "next": "latest",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "server-only": "0.0.1",
+        "stripe": "14.8.0"
       },
       "devDependencies": {
-        "@types/node": "^12.12.21",
-        "@types/react": "^17.0.2",
-        "@types/react-dom": "^17.0.1",
-        "typescript": "^4.8.3"
+        "@types/node": "20.4.6",
+        "@types/react": "18.2.8",
+        "typescript": "5.1.6"
       }
     },
     "node_modules/@emnapi/runtime": {
···
         "node": ">= 10"
       }
     },
-    "node_modules/@stripe/stripe-js": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.6.0.tgz",
-      "integrity": "sha512-EB0/GGgs4hfezzkiMkinlRgWtjz8fSdwVQhwYS7Sg/RQrSvuNOz+ssPjD+lAzqaYTCB0zlbrt0fcqVziLJrufQ==",
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-2.4.0.tgz",
+      "integrity": "sha512-1jVQEL3OuhuzNlf4OdfqovHt+MkWh8Uh8xpLxx/xUFUDdF+7/kDOrGKy+xJO3WLCfZUL7NAy+/ypwXbbYZi0tg==",
       "license": "MIT",
-      "engines": {
-        "node": ">=12.16"
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": "^1.44.1 || ^2.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-2.2.2.tgz",
+      "integrity": "sha512-LvFZRZEBoMe6vXC6RoOAIbXWo/0JDdndq43ekL9M6affcM7PtF5KALmwt91BazW7q49sbSl0l7TunWhhSwEW4w==",
+      "license": "MIT"
     },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
···
       }
     },
     "node_modules/@types/node": {
-      "version": "12.20.55",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.55.tgz",
-      "integrity": "sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==",
-      "dev": true,
+      "version": "20.4.6",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.4.6.tgz",
+      "integrity": "sha512-q0RkvNgMweWWIvSMDiXhflGUKMdIxBo2M2tYM/0kEGDueQByFzK4KZAgu5YHGFNxziTlppNpTIBcqHQAxlfHdA==",
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
···
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "17.0.90",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.90.tgz",
-      "integrity": "sha512-P9beVR/x06U9rCJzSxtENnOr4BrbJ6VrsrDTc+73TtHv9XHhryXKbjGRB+6oooB2r0G/pQkD/S4dHo/7jUfwFw==",
+      "version": "18.2.8",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.8.tgz",
+      "integrity": "sha512-lTyWUNrd8ntVkqycEEplasWy2OxNlShj3zqS0LuB1ENUGis5HodmhM7DtCoUGbxj3VW/WsGA0DUhpG6XrM7gPA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "^0.16",
-        "csstype": "^3.2.2"
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-dom": {
-      "version": "17.0.26",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.26.tgz",
-      "integrity": "sha512-Z+2VcYXJwOqQ79HreLU/1fyQ88eXSSFh6I3JdrEHQIfYSI0kCQpTGvOrbE6jFGGYXKsHuwY9tBa/w5Uo6KzrEg==",
+    "node_modules/@types/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
       "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "^17.0.0"
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001760",
···
         "node": ">=8"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
···
       },
       "bin": {
         "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/nanoid": {
···
         }
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
···
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
+      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
···
       }
     },
     "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
+        "scheduler": "^0.23.0"
       },
       "peerDependencies": {
-        "react": "^18.3.1"
+        "react": "^18.2.0"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
···
       "engines": {
         "node": ">=10"
       }
+    },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+      "license": "MIT"
     },
     "node_modules/sharp": {
       "version": "0.34.5",
···
         "@img/sharp-win32-x64": "0.34.5"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
···
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stripe": {
+      "version": "14.8.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-14.8.0.tgz",
+      "integrity": "sha512-Qdecqk7lx095BE829NWxrG1+69NjPuHrpZqeR61i2KO00fpKkjMX9TYjwFU+WjQD6ZcNmCGOwNfnz5VnI5bjIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.11.0"
+      },
+      "engines": {
+        "node": ">=12.*"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
···
       "license": "0BSD"
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz",
+      "integrity": "sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
···
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     }
   }

package.json

···
 {
-  "name": "eny.space",
-  "version": "1.0.0",
-  "description": "eny.space",
-  "author": "Krekeny GmbH",
-  "license": "MIT",
   "private": true,
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "type-check": "tsc"
+    "start": "next start"
   },
   "dependencies": {
-    "@stripe/stripe-js": "^8.6.0",
+    "@stripe/react-stripe-js": "2.4.0",
+    "@stripe/stripe-js": "2.2.2",
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "server-only": "0.0.1",
+    "stripe": "14.8.0"
   },
   "devDependencies": {
-    "@types/node": "^12.12.21",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.1",
-    "typescript": "^4.8.3"
+    "@types/node": "20.4.6",
+    "@types/react": "18.2.8",
+    "typescript": "5.1.6"
   }
 }

pages/about.tsx

···
-import Link from "next/link";
-import Layout from "../components/Layout";
-
-const AboutPage = () => (
-  <Layout title="About | Next.js + TypeScript Example">
-    <h1>About</h1>
-    <p>This is the about page</p>
-    <p>
-      <Link href="/">Go home</Link>
-    </p>
-  </Layout>
-);
-
-export default AboutPage;

pages/api/users/index.ts

···
-import { NextApiRequest, NextApiResponse } from "next";
-import { sampleUserData } from "@/utils/sample-data";
-
-const handler = (_req: NextApiRequest, res: NextApiResponse) => {
-  try {
-    if (!Array.isArray(sampleUserData)) {
-      throw new Error("Cannot find user data");
-    }
-
-    res.status(200).json(sampleUserData);
-  } catch (err: any) {
-    res.status(500).json({ statusCode: 500, message: err.message });
-  }
-};
-
-export default handler;

pages/index.tsx

···
-import Link from "next/link";
-import Layout from "../components/Layout";
-
-const IndexPage = () => (
-  <Layout title="Home | Next.js + TypeScript Example">
-    <h1>Hello Next.js 👋</h1>
-    <p>
-      <Link href="/about">About</Link>
-    </p>
-  </Layout>
-);
-
-export default IndexPage;

pages/users/[id].tsx

···
-import { GetStaticProps, GetStaticPaths } from "next";
-
-import { User } from "../../interfaces";
-import { sampleUserData } from "../../utils/sample-data";
-import Layout from "../../components/Layout";
-import ListDetail from "../../components/ListDetail";
-
-type Props = {
-  item?: User;
-  errors?: string;
-};
-
-const StaticPropsDetail = ({ item, errors }: Props) => {
-  if (errors) {
-    return (
-      <Layout title="Error | Next.js + TypeScript Example">
-        <p>
-          <span style={{ color: "red" }}>Error:</span> {errors}
-        </p>
-      </Layout>
-    );
-  }
-
-  return (
-    <Layout
-      title={`${
-        item ? item.name : "User Detail"
-      } | Next.js + TypeScript Example`}
-    >
-      {item && <ListDetail item={item} />}
-    </Layout>
-  );
-};
-
-export default StaticPropsDetail;
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  // Get the paths we want to pre-render based on users
-  const paths = sampleUserData.map((user) => ({
-    params: { id: user.id.toString() },
-  }));
-
-  // We'll pre-render only these paths at build time.
-  // { fallback: false } means other routes should 404.
-  return { paths, fallback: false };
-};
-
-// This function gets called at build time on server-side.
-// It won't be called on client-side, so you can even do
-// direct database queries.
-export const getStaticProps: GetStaticProps = async ({ params }) => {
-  try {
-    const id = params?.id;
-    const item = sampleUserData.find((data) => data.id === Number(id));
-    // By returning { props: item }, the StaticPropsDetail component
-    // will receive `item` as a prop at build time
-    return { props: { item } };
-  } catch (err: any) {
-    return { props: { errors: err.message } };
-  }
-};

pages/users/index.tsx

···
-import { GetStaticProps } from "next";
-import Link from "next/link";
-
-import { User } from "../../interfaces";
-import { sampleUserData } from "../../utils/sample-data";
-import Layout from "../../components/Layout";
-import List from "../../components/List";
-
-type Props = {
-  items: User[];
-};
-
-const WithStaticProps = ({ items }: Props) => (
-  <Layout title="Users List | Next.js + TypeScript Example">
-    <h1>Users List</h1>
-    <p>
-      Example fetching data from inside <code>getStaticProps()</code>.
-    </p>
-    <p>You are currently on: /users</p>
-    <List items={items} />
-    <p>
-      <Link href="/">Go home</Link>
-    </p>
-  </Layout>
-);
-
-export const getStaticProps: GetStaticProps = async () => {
-  // Example for including static props in a Next.js function component page.
-  // Don't forget to include the respective types for any props passed into
-  // the component.
-  const items: User[] = sampleUserData;
-  return { props: { items } };
-};
-
-export default WithStaticProps;

public/checkout-one-time-payments.svg

···
+<svg height="156" viewBox="0 0 240 156" width="240" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" transform="translate(0 1)"><rect fill="#fff" height="154" opacity=".8" rx="4" width="240"/><path d="m99 0v154" opacity=".068034" stroke="#000" stroke-linecap="square"/><text style="opacity:.836844;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:18;font-weight:500;letter-spacing:-.45;fill:#8f6ed5"><tspan x="14" y="48">$29.90</tspan></text><path d="m18 17h23c1.1045695 0 2 .8954305 2 2s-.8954305 2-2 2h-23c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2z" fill="#8f6ed5"/><g transform="translate(112 109)"><path d="m3.58943928 0h109.02112172c1.248126 0 1.700727.12995586 2.157023.37398579s.8144.60213393 1.05843 1.05843023c.24403.45629629.373986.90889702.373986 2.15702326v12.42112142c0 1.2481263-.129956 1.700727-.373986 2.1570233s-.602134.8144003-1.05843 1.0584302-.908897.3739858-2.157023.3739858h-109.02112172c-1.24812624 0-1.70072697-.1299559-2.15702326-.3739858-.4562963-.2440299-.8144003-.6021339-1.05843023-1.0584302s-.37398579-.908897-.37398579-2.1570233v-12.42112142c0-1.24812624.12995586-1.70072697.37398579-2.15702326.24402993-.4562963.60213393-.8144003 1.05843023-1.05843023.45629629-.24402993.90889702-.37398579 2.15702326-.37398579z" fill="#8f6ed5"/><text style="opacity:.7;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:10;font-weight:500;letter-spacing:.12;fill:#f7fafc"><tspan x="29" y="14">Pay $29.90</tspan></text></g><g transform="translate(112 83)"><path d="m3.58943928.35c-1.08510563 0-1.53103464.08611287-1.99196366.33262041-.39530234.21141-.70344521.51955287-.91485521.91485521-.24650754.46092902-.33262041.90685803-.33262041 1.99196366v12.42112142c0 1.0851056.08611287 1.5310347.33262041 1.9919637.21141.3953023.51955287.7034452.91485521.9148552.46092902.2465075.90685803.3326204 1.99196366.3326204h109.02112172c1.085105 0 1.531034-.0861129 1.991963-.3326204.395303-.21141.703446-.5195529.914856-.9148552.246507-.460929.33262-.9068581.33262-1.9919637v-12.42112142c0-1.08510563-.086113-1.53103464-.33262-1.99196366-.21141-.39530234-.519553-.70344521-.914856-.91485521-.460929-.24650754-.906858-.33262041-1.991963-.33262041z" fill="#fff" opacity=".8" stroke="#8f6ed5" stroke-opacity=".266253" stroke-width=".7"/><g fill-rule="nonzero" opacity=".5" transform="translate(95.2 4.2)"><rect fill="#ebf1f8" height="10.7" rx="1.4" stroke="#a450b5" stroke-width=".5" width="16.3" x=".25" y=".25"/><path d="m2.30141283 4.14010612c-.36619921-.20085195-.7841356-.36238968-1.25141283-.47449094l.01960035-.08729771h1.91588511c.25968832.00910242.47040833.08723662.53897699.36318047l.41637443 1.98511543.12755149.59789495 1.1661881-2.94619085h1.2591758l-1.87173549 4.31595242h-1.25924092zm5.11856981 3.75874553h-1.1908025l.7448132-4.32053418h1.19073738zm4.31676486-4.21490945-.1619471.93296757-.1077042-.04587865c-.2154736-.0873588-.4999065-.17465651-.8870297-.16543191-.4701478 0-.68099808.18834069-.68588189.3722218 0 .20226923.25506499.33556776.67155609.53325523.6860773.30795505 1.0043062.6848197.9995526 1.17665586-.0096374.89631352-.8230844 1.47550848-2.07255766 1.47550848-.53422342-.00464284-1.04878137-.11057303-1.32807004-.22994303l.16663551-.96986596.15680278.06903178c.38712314.16103343.64186253.22982085 1.11728491.22982085.34284328 0 .7104312-.13342072.7151196-.42286548 0-.18846286-.1566074-.32646533-.61731322-.53789807-.45074287-.20691207-1.05340471-.55158225-1.04363709-1.17213519.00507916-.8410881.83317755-1.42938548 2.00913331-1.42938548.4606407 0 .8331775.09652231 1.0680561.1839422zm1.5826792 2.68429772h.989785c-.0489683-.21601449-.27447-1.2502083-.27447-1.2502083l-.0832201-.37228289c-.058801.16085015-.1616214.42286547-.1566725.41364087 0 0-.3773555.96064136-.4754224 1.20885032zm1.4698958-2.78992245.9606775 4.32047309h-1.1025684s-.1078996-.49641792-.1420862-.64810457h-1.5288922c-.0442148.11484934-.2499207.64810457-.2499207.64810457h-1.2494733l1.7687848-3.96199655c.122551-.28040343.3383502-.35847654.6223924-.35847654z" fill="#8f6ed5"/></g><g fill="#1a1f36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8.4" font-weight="500"><text opacity=".67"><tspan x="5.6" y="12.9">4242</tspan></text><text opacity=".67"><tspan x="33.6" y="12.9">11/26</tspan></text><text opacity=".67"><tspan x="61.6" y="12.9">934</tspan></text></g></g><g transform="translate(112 57)"><path d="m3.58943928.35c-1.08510563 0-1.53103464.08611287-1.99196366.33262041-.39530234.21141-.70344521.51955287-.91485521.91485521-.24650754.46092902-.33262041.90685803-.33262041 1.99196366v12.42112142c0 1.0851056.08611287 1.5310347.33262041 1.9919637.21141.3953023.51955287.7034452.91485521.9148552.46092902.2465075.90685803.3326204 1.99196366.3326204h109.02112172c1.085105 0 1.531034-.0861129 1.991963-.3326204.395303-.21141.703446-.5195529.914856-.9148552.246507-.460929.33262-.9068581.33262-1.9919637v-12.42112142c0-1.08510563-.086113-1.53103464-.33262-1.99196366-.21141-.39530234-.519553-.70344521-.914856-.91485521-.460929-.24650754-.906858-.33262041-1.991963-.33262041z" fill="#fff" opacity=".8" stroke="#8f6ed5" stroke-opacity=".266253" stroke-width=".7"/><text fill="#1a1f36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8.4" font-weight="500" opacity=".67"><tspan x="5.6" y="13.6">Jenny Rosen</tspan></text></g><g transform="translate(112 31)"><path d="m3.58943928.35c-1.08510563 0-1.53103464.08611287-1.99196366.33262041-.39530234.21141-.70344521.51955287-.91485521.91485521-.24650754.46092902-.33262041.90685803-.33262041 1.99196366v12.42112142c0 1.0851056.08611287 1.5310347.33262041 1.9919637.21141.3953023.51955287.7034452.91485521.9148552.46092902.2465075.90685803.3326204 1.99196366.3326204h109.02112172c1.085105 0 1.531034-.0861129 1.991963-.3326204.395303-.21141.703446-.5195529.914856-.9148552.246507-.460929.33262-.9068581.33262-1.9919637v-12.42112142c0-1.08510563-.086113-1.53103464-.33262-1.99196366-.21141-.39530234-.519553-.70344521-.914856-.91485521-.460929-.24650754-.906858-.33262041-1.991963-.33262041z" fill="#fff" opacity=".8" stroke="#8f6ed5" stroke-opacity=".266253" stroke-width=".7"/><text fill="#1a1f36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="8.4" font-weight="500" opacity=".67"><tspan x="5.6" y="13.6">[e-mail]</tspan></text></g></g></svg>

public/elements-card-payment.svg

···
+<svg height="64" viewBox="0 0 202 64" width="202" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="#fff" height="28" opacity=".8" rx="4" width="202"/><g transform="translate(0 36)"><rect fill="#4e5663" height="28" rx="4" width="202"/><text style="opacity:.7;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:14;font-weight:500;letter-spacing:-.154;fill:#fff"><tspan x="63" y="19">Pay $29.90</tspan></text></g><text fill="#1a1f36" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="12" font-weight="500" opacity=".797503"><tspan x="9" y="19">4242 4242 4242 4242</tspan></text><g fill-rule="nonzero" opacity=".5" transform="translate(171 6)"><rect height="15.5" rx="2" stroke="#4f566b" stroke-width=".5" width="23.5" x=".25" y=".25"/><path d="m3.28773262 5.91443732c-.52314173-.28693137-1.12019372-.51769955-1.78773262-.6778442l.0280005-.12471102h2.73697872c.37098332.01300346.67201191.12462375.76996714.51882925l.59482061 2.83587917.18221641.85413565 1.66598301-4.20884407h1.79882257l-2.67390785 6.1656463h-1.79891559zm7.31224258 5.36963648h-1.70114643l1.06401886-6.1721917h1.70105337zm6.1668069-6.02129922-.2313529 1.3328108-.1538632-.06554092c-.3078194-.12479829-.7141522-.2495093-1.2671852-.2363313-.6716398 0-.9728545.26905813-.9798314.53174543 0 .28895604.3643786.47938251.9593659.76179318.9801104.43993579 1.4347231.97831385 1.4279323 1.68093694-.0137677 1.28044789-1.1758348 2.10786929-2.9607967 2.10786929-.7631763-.0066327-1.4982591-.1579615-1.8972429-.3284901l.2380507-1.38552277.224004.09861682c.5530331.23004776.9169465.32831555 1.5961213.32831555.4897761 0 1.0149017-.19060107 1.0215995-.60409358 0-.26923267-.2237249-.46637906-.8818761-.76842582-.6439184-.29558867-1.5048639-.78797464-1.4909101-1.67447884.0072559-1.20155443 1.1902536-2.04197926 2.8701904-2.04197926.6580581 0 1.1902536.13788902 1.5257944.26277458zm2.2609703 3.83471102h1.4139786c-.0699548-.30859213-.3921-1.78601186-.3921-1.78601186l-.1188858-.5318327c-.0840015.22978594-.2308878.60409353-.2238179.59091553 0 0-.5390794 1.3723448-.6791749 1.72692903zm2.0998512-3.9856035 1.3723964 6.1721044h-1.5750977s-.1541422-.7091684-.2029803-.9258637h-2.1841317c-.0631639.1640705-.3570296.9258637-.3570296.9258637h-1.7849619l2.5268355-5.65999506c.1750729-.40057632.4833574-.51210934.889132-.51210934z" fill="#3c4257"/></g></g></svg>

styles.css

···
+/* Variables */
+:root {
+  --body-color: #fcfdfe;
+  --checkout-color: #8f6ed5;
+  --elements-color: #6772e5;
+  --body-font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --h1-color: #1a1f36;
+  --h2-color: #7b818a;
+  --h3-color: #a3acb9;
+  --radius: 6px;
+  --container-width-max: 1280px;
+  --page-width-max: 600px;
+  --transition-duration: 2s;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--body-color);
+  overflow-y: scroll;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: var(--body-font-family);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+#__next {
+  display: flex;
+  justify-content: center;
+}
+
+.container {
+  max-width: var(--container-width-max);
+  padding: 45px 25px;
+  display: flex;
+  flex-direction: row;
+}
+
+.page-container {
+  padding-bottom: 60px;
+  max-width: var(--page-width-max);
+}
+
+h1 {
+  font-weight: 600;
+  color: var(--h1-color);
+  margin: 6px 0 12px;
+  font-size: 27px;
+  line-height: 32px;
+}
+
+h1 span.light {
+  color: var(--h3-color);
+}
+
+h2 {
+  color: var(--h2-color);
+  margin: 8px 0;
+}
+
+h3 {
+  font-size: 17px;
+  color: var(--h3-color);
+  margin: 8px 0;
+}
+
+a {
+  color: var(--checkout-color);
+  text-decoration: none;
+}
+
+header {
+  position: relative;
+  flex: 0 0 250px;
+  padding-right: 48px;
+}
+
+.header-content {
+  position: sticky;
+  top: 45px;
+}
+
+.logo img {
+  height: 20px;
+  margin-bottom: 52px;
+}
+
+ul,
+li {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  padding-top: 64px;
+}
+
+.card {
+  display: block;
+  border-radius: 10px;
+  position: relative;
+  padding: 12px;
+  height: 320px;
+  flex: 0 0 33%;
+  min-width: 304px;
+  width: 33%;
+  margin: 0 20px 20px 0;
+  text-decoration: none;
+  box-shadow:
+    -20px 20px 60px #abacad,
+    20px -20px 60px #ffffff;
+}
+.card h2 {
+  color: #fff;
+}
+.card h2.bottom {
+  position: absolute;
+  bottom: 10px;
+}
+
+.card img {
+  width: 80%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.error-message {
+  color: #ef2961;
+}
+
+.FormRow,
+fieldset,
+input[type="number"],
+input[type="text"] {
+  border-radius: var(--radius);
+  padding: 5px 12px;
+  width: 100%;
+  background: #fff;
+  appearance: none;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+input[type="range"] {
+  margin: 5px 0;
+  width: 100%;
+}
+
+button {
+  border-radius: var(--radius);
+  color: white;
+  font-size: larger;
+  border: 0;
+  padding: 12px 16px;
+  margin-top: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.elements-style {
+  color: var(--elements-color);
+  border: 1px solid var(--elements-color);
+}
+.elements-style-background {
+  background: var(--elements-color);
+  transition: box-shadow var(--transition-duration);
+}
+.card.elements-style-background:hover {
+  box-shadow:
+    20px 20px 60px #464e9c,
+    -20px -20px 60px #8896ff;
+}
+.checkout-style {
+  color: var(--checkout-color);
+  border: 1px solid var(--checkout-color);
+}
+.checkout-style-background {
+  background: var(--checkout-color);
+  transition: box-shadow var(--transition-duration);
+}
+.card.checkout-style-background:hover {
+  box-shadow:
+    20px 20px 60px #614b91,
+    -20px -20px 60px #bd91ff;
+}
+
+/* Test card number */
+.test-card-notice {
+  display: block;
+  margin-block-start: 1em;
+  margin-block-end: 1em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+.card-number {
+  display: inline;
+  white-space: nowrap;
+  font-family: Menlo, Consolas, monospace;
+  color: #3c4257;
+  font-weight: 500;
+}
+.card-number span {
+  display: inline-block;
+  width: 4px;
+}
+
+/* Code block */
+code,
+pre {
+  font-family: "SF Mono", "IBM Plex Mono", "Menlo", monospace;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.03);
+  padding: 12px;
+  border-radius: var(--radius);
+  max-height: 500px;
+  width: var(--page-width-max);
+  overflow: auto;
+}
+
+.banner {
+  max-width: 825px;
+  margin: 0 auto;
+  font-size: 14px;
+  background: var(--body-color);
+  color: #6a7c94;
+  border-radius: 50px;
+  box-shadow:
+    -20px 20px 60px #abacad,
+    20px -20px 60px #ffffff;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 15px;
+  line-height: 1.15;
+  position: fixed;
+  bottom: 2vh;
+  left: 0;
+  right: 0;
+  text-align: center;
+  justify-content: center;
+}
+
+@media only screen and (max-width: 980px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .header-content {
+    max-width: 280px;
+    position: relative;
+    top: 0;
+  }
+
+  .card {
+    margin: 0 20px 20px 0;
+    box-shadow: none;
+  }
+
+  .card-list {
+    padding-top: 0;
+  }
+
+  .banner {
+    box-shadow: none;
+    bottom: 0;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .card {
+    display: block;
+    border-radius: 8px;
+    flex: 1 0 100%;
+    max-width: 100%;
+    padding-left: 0;
+    padding-right: 0;
+    margin: 0 0 20px 0;
+    box-shadow: none;
+  }
+
+  .card-list {
+    padding-top: 0;
+  }
+
+  code,
+  pre,
+  h3 {
+    display: none;
+  }
+
+  .banner {
+    box-shadow: none;
+    bottom: 0;
+  }
+}

tsconfig.json

···
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2019",
     "lib": [
       "dom",
       "dom.iterable",
···
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
+    "incremental": true,
     "jsx": "react-jsx",
+    "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./*"
+      "@/actions/*": [
+        "app/actions/*"
+      ],
+      "@/components/*": [
+        "app/components/*"
+      ],
+      "@/config": [
+        "config/"
+      ],
+      "@/lib/*": [
+        "lib/*"
+      ],
+      "@/utils/*": [
+        "utils/*"
       ]
     },
-    "incremental": true
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
+  "exclude": [
+    "node_modules"
+  ],
   "include": [
     "next-env.d.ts",
     "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ]
 }

types/routes.d.ts

···
 // This file is generated automatically by Next.js
 // Do not edit this file manually
 
-type AppRoutes = never
-type PageRoutes = "/" | "/about" | "/users" | "/users/[id]"
-type LayoutRoutes = never
+type AppRoutes = "/" | "/donate-with-checkout" | "/donate-with-checkout/result" | "/donate-with-elements" | "/donate-with-elements/result" | "/donate-with-embedded-checkout" | "/donate-with-embedded-checkout/result"
+type AppRouteHandlerRoutes = "/api/webhooks"
+type PageRoutes = never
+type LayoutRoutes = "/" | "/donate-with-checkout/result" | "/donate-with-elements/result" | "/donate-with-embedded-checkout/result"
 type RedirectRoutes = never
 type RewriteRoutes = never
-type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRoutes
+type Routes = AppRoutes | PageRoutes | LayoutRoutes | RedirectRoutes | RewriteRoutes | AppRouteHandlerRoutes
 
 
 interface ParamMap {
   "/": {}
-  "/about": {}
-  "/users": {}
-  "/users/[id]": { "id": string; }
+  "/api/webhooks": {}
+  "/donate-with-checkout": {}
+  "/donate-with-checkout/result": {}
+  "/donate-with-elements": {}
+  "/donate-with-elements/result": {}
+  "/donate-with-embedded-checkout": {}
+  "/donate-with-embedded-checkout/result": {}
 }
 
 
 export type ParamsOf<Route extends Routes> = ParamMap[Route]
 
 interface LayoutSlotMap {
+  "/": never
+  "/donate-with-checkout/result": never
+  "/donate-with-elements/result": never
+  "/donate-with-embedded-checkout/result": never
 }
 
 
-export type { AppRoutes, PageRoutes, LayoutRoutes, RedirectRoutes, RewriteRoutes, ParamMap }
+export type { AppRoutes, PageRoutes, LayoutRoutes, RedirectRoutes, RewriteRoutes, ParamMap, AppRouteHandlerRoutes }
 
 declare global {
   /**
···
     children: React.ReactNode
   } & {
     [K in LayoutSlotMap[LayoutRoute]]: React.ReactNode
+  }
+
+  /**
+   * Context for Next.js App Router route handlers
+   * @example
+   * ```tsx
+   * export async function GET(request: NextRequest, context: RouteContext<'/api/users/[id]'>) {
+   *   const { id } = await context.params
+   *   return Response.json({ id })
+   * }
+   * ```
+   */
+  interface RouteContext<AppRouteHandlerRoute extends AppRouteHandlerRoutes> {
+    params: Promise<ParamMap[AppRouteHandlerRoute]>
   }
 }

types/validator.ts

···
 // Do not edit this file manually
 // This file validates that all pages and layouts export the correct types
 
+import type { AppRoutes, LayoutRoutes, ParamMap, AppRouteHandlerRoutes } from "./routes.js"
+import type { ResolvingMetadata, ResolvingViewport } from "next/types.js"
+import type { NextRequest } from 'next/server.js'
 
-import type { NextApiHandler } from "next/types.js"
+type AppPageConfig<Route extends AppRoutes = AppRoutes> = {
+  default: React.ComponentType<{ params: Promise<ParamMap[Route]> } & any> | ((props: { params: Promise<ParamMap[Route]> } & any) => React.ReactNode | Promise<React.ReactNode> | never | void | Promise<void>)
+  generateStaticParams?: (props: { params: ParamMap[Route] }) => Promise<any[]> | any[]
+  generateMetadata?: (
+    props: { params: Promise<ParamMap[Route]> } & any,
+    parent: ResolvingMetadata
+  ) => Promise<any> | any
+  generateViewport?: (
+    props: { params: Promise<ParamMap[Route]> } & any,
+    parent: ResolvingViewport
+  ) => Promise<any> | any
+  metadata?: any
+  viewport?: any
+}
 
-type PagesPageConfig = {
-  default: React.ComponentType<any> | ((props: any) => React.ReactNode | Promise<React.ReactNode> | never | void)
-  getStaticProps?: (context: any) => Promise<any> | any
-  getStaticPaths?: (context: any) => Promise<any> | any
-  getServerSideProps?: (context: any) => Promise<any> | any
-  getInitialProps?: (context: any) => Promise<any> | any
-  /**
-   * Segment configuration for legacy Pages Router pages.
-   * Validated at build-time by parsePagesSegmentConfig.
-   */
-  config?: {
-    maxDuration?: number
-    runtime?: 'edge' | 'experimental-edge' | 'nodejs' | string // necessary unless config is exported as const
-    regions?: string[]
-  }
+type LayoutConfig<Route extends LayoutRoutes = LayoutRoutes> = {
+  default: React.ComponentType<LayoutProps<Route>> | ((props: LayoutProps<Route>) => React.ReactNode | Promise<React.ReactNode> | never | void | Promise<void>)
+  generateStaticParams?: (props: { params: ParamMap[Route] }) => Promise<any[]> | any[]
+  generateMetadata?: (
+    props: { params: Promise<ParamMap[Route]> } & any,
+    parent: ResolvingMetadata
+  ) => Promise<any> | any
+  generateViewport?: (
+    props: { params: Promise<ParamMap[Route]> } & any,
+    parent: ResolvingViewport
+  ) => Promise<any> | any
+  metadata?: any
+  viewport?: any
 }
 
-type ApiRouteConfig = {
-  default: (req: any, res: any) => ReturnType<NextApiHandler>
-  config?: {
-    api?: {
-      bodyParser?: boolean | { sizeLimit?: string }
-      responseLimit?: string | number | boolean
-      externalResolver?: boolean
-    }
-    runtime?: 'edge' | 'experimental-edge' | 'nodejs' | string // necessary unless config is exported as const
-    maxDuration?: number
-  }
+type RouteHandlerConfig<Route extends AppRouteHandlerRoutes = AppRouteHandlerRoutes> = {
+  GET?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  POST?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  PUT?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  PATCH?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  DELETE?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  HEAD?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
+  OPTIONS?: (request: NextRequest, context: { params: Promise<ParamMap[Route]> }) => Promise<Response | void> | Response | void
 }
 
 
+// Validate ../../app/donate-with-checkout/page.tsx
+{
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-checkout">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-checkout/page.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
 
+// Validate ../../app/donate-with-checkout/result/page.tsx
+{
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-checkout/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-checkout/result/page.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
 
+// Validate ../../app/donate-with-elements/page.tsx
+{
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-elements">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-elements/page.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
 
+// Validate ../../app/donate-with-elements/result/page.tsx
+{
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-elements/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-elements/result/page.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
 
-// Validate ../../pages/about.tsx
+// Validate ../../app/donate-with-embedded-checkout/page.tsx
 {
-  type __IsExpected<Specific extends PagesPageConfig> = Specific
-  const handler = {} as typeof import("../../pages/about.js")
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-embedded-checkout">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-embedded-checkout/page.js")
   type __Check = __IsExpected<typeof handler>
   // @ts-ignore
   type __Unused = __Check
 }
 
-// Validate ../../pages/index.tsx
+// Validate ../../app/donate-with-embedded-checkout/result/page.tsx
 {
-  type __IsExpected<Specific extends PagesPageConfig> = Specific
-  const handler = {} as typeof import("../../pages/index.js")
+  type __IsExpected<Specific extends AppPageConfig<"/donate-with-embedded-checkout/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-embedded-checkout/result/page.js")
   type __Check = __IsExpected<typeof handler>
   // @ts-ignore
   type __Unused = __Check
 }
 
-// Validate ../../pages/users/[id].tsx
+// Validate ../../app/page.tsx
 {
-  type __IsExpected<Specific extends PagesPageConfig> = Specific
-  const handler = {} as typeof import("../../pages/users/[id].js")
+  type __IsExpected<Specific extends AppPageConfig<"/">> = Specific
+  const handler = {} as typeof import("../../app/page.js")
   type __Check = __IsExpected<typeof handler>
   // @ts-ignore
   type __Unused = __Check
 }
 
-// Validate ../../pages/users/index.tsx
+// Validate ../../app/api/webhooks/route.ts
 {
-  type __IsExpected<Specific extends PagesPageConfig> = Specific
-  const handler = {} as typeof import("../../pages/users/index.js")
+  type __IsExpected<Specific extends RouteHandlerConfig<"/api/webhooks">> = Specific
+  const handler = {} as typeof import("../../app/api/webhooks/route.js")
   type __Check = __IsExpected<typeof handler>
   // @ts-ignore
   type __Unused = __Check
 }
 
-// Validate ../../pages/api/users/index.ts
+
+
+
+
+// Validate ../../app/donate-with-checkout/result/layout.tsx
 {
-  type __IsExpected<Specific extends ApiRouteConfig> = Specific
-  const handler = {} as typeof import("../../pages/api/users/index.js")
+  type __IsExpected<Specific extends LayoutConfig<"/donate-with-checkout/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-checkout/result/layout.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
+
+// Validate ../../app/donate-with-elements/result/layout.tsx
+{
+  type __IsExpected<Specific extends LayoutConfig<"/donate-with-elements/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-elements/result/layout.js")
   type __Check = __IsExpected<typeof handler>
   // @ts-ignore
   type __Unused = __Check
 }
 
+// Validate ../../app/donate-with-embedded-checkout/result/layout.tsx
+{
+  type __IsExpected<Specific extends LayoutConfig<"/donate-with-embedded-checkout/result">> = Specific
+  const handler = {} as typeof import("../../app/donate-with-embedded-checkout/result/layout.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}
 
+// Validate ../../app/layout.tsx
+{
+  type __IsExpected<Specific extends LayoutConfig<"/">> = Specific
+  const handler = {} as typeof import("../../app/layout.js")
+  type __Check = __IsExpected<typeof handler>
+  // @ts-ignore
+  type __Unused = __Check
+}

utils/get-stripejs.ts

···
+/**
+ * This is a singleton to ensure we only instantiate Stripe once.
+ */
 import { Stripe, loadStripe } from "@stripe/stripe-js";
 
 let stripePromise: Promise<Stripe | null>;
-const getStripe = () => {
-  if (!stripePromise) {
-    stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
-  }
-  return stripePromise;
-};
 
-export default getStripe;
+export default function getStripe(): Promise<Stripe | null> {
+  if (!stripePromise)
+    stripePromise = loadStripe(
+      process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY as string,
+    );
+
+  return stripePromise;
+}

utils/sample-data.ts

···
-import { User } from "../interfaces";
-
-/** Dummy user data. */
-export const sampleUserData: User[] = [
-  { id: 101, name: "Alice" },
-  { id: 102, name: "Bob" },
-  { id: 103, name: "Caroline" },
-  { id: 104, name: "Dave" },
-];

utils/stripe-helpers.ts

···
+export function formatAmountForDisplay(
+  amount: number,
+  currency: string,
+): string {
+  let numberFormat = new Intl.NumberFormat(["en-US"], {
+    style: "currency",
+    currency: currency,
+    currencyDisplay: "symbol",
+  });
+  return numberFormat.format(amount);
+}
+
+export function formatAmountForStripe(
+  amount: number,
+  currency: string,
+): number {
+  let numberFormat = new Intl.NumberFormat(["en-US"], {
+    style: "currency",
+    currency: currency,
+    currencyDisplay: "symbol",
+  });
+  const parts = numberFormat.formatToParts(amount);
+  let zeroDecimalCurrency: boolean = true;
+  for (let part of parts) {
+    if (part.type === "decimal") {
+      zeroDecimalCurrency = false;
+    }
+  }
+  return zeroDecimalCurrency ? amount : Math.round(amount * 100);
+}