Checkout and Stripe setup

README.md

@@ -1,3 +1,5 @@
 # <img src="public/assets/images/logo.svg" alt="logo" />
 
 Build an event organization web app like Eventbrite or Meetup with authentication, event management, search, filtering, categories, checkout, and payments using Next JS 14, Tailwind CSS, Shadcn, React Hook Form, Zod, Uploadthing, React-Datepicker, Mongoose, Clerk, and Stripe.
+
+`ngrok tunnel --label edge=edghts_2jQbAk4QzC90ArEGm4eYkVIhI1v http://localhost:3000`

app/(root)/events/[id]/page.tsx

@@ -1,4 +1,5 @@
 // import CheckoutButton from '@/components/shared/CheckoutButton';
+import CheckoutButton from "@/components/shared/CheckoutButton";
 import Collection from "@/components/shared/Collection";
 import {
   getEventById,
@@ -51,7 +52,9 @@ const EventDetails = async ({
                 </p>
               </div>
             </div>
-            CheckoutButton
+
+            <CheckoutButton event={event} />
+
             <div className="flex flex-col gap-5">
               <div className="flex gap-2 md:gap-3">
                 <Image

components/shared/Checkout.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+import { loadStripe } from "@stripe/stripe-js";
+
+import { IEvent } from "@/lib/database/models/event.model";
+import { Button } from "../ui/button";
+import { checkoutOrder } from "@/lib/actions/order.actions";
+
+loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
+
+const Checkout = ({ event, userId }: { event: IEvent; userId: string }) => {
+  useEffect(() => {
+    const query = new URLSearchParams(window.location.search);
+    if (query.get("success")) {
+      console.log("Order placed! You will receive an email confirmation.");
+    }
+
+    if (query.get("canceled")) {
+      console.log(
+        "Order canceled -- continue to shop around and checkout when you’re ready.",
+      );
+    }
+  }, []);
+
+  const onCheckout = async () => {
+    const order = {
+      eventTitle: event.title,
+      eventId: event._id,
+      price: event.price,
+      isFree: event.isFree,
+      buyerId: userId,
+    };
+
+    await checkoutOrder(order);
+  };
+
+  return (
+    <form action={onCheckout} method="post">
+      <Button type="submit" role="link" size="lg" className="button sm:w-fit">
+        {event.isFree ? "Get Tickets" : "Buy Tickets"}
+      </Button>
+    </form>
+  );
+};
+
+export default Checkout;

components/shared/CheckoutButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { SignedIn, SignedOut, useUser } from "@clerk/nextjs";
+import React from "react";
+import { Button } from "../ui/button";
+import Link from "next/link";
+import Checkout from "./Checkout";
+import { IEvent } from "@/lib/database/models/event.model";
+
+const CheckoutButton = ({ event }: { event: IEvent }) => {
+  const { user } = useUser();
+  const userId = user?.publicMetadata.userId as string;
+
+  return (
+    <div className="flex items-center gap-3">
+      <SignedOut>
+        <Button asChild size="lg" className="button rounded-full">
+          <Link href="/sign-in">Get Tickets</Link>
+        </Button>
+      </SignedOut>
+
+      <SignedIn>
+        <Checkout event={event} userId={userId} />
+      </SignedIn>
+    </div>
+  );
+};
+
+export default CheckoutButton;