diff --git a/README.md b/README.md
index d606cc0..c854edf 100644
--- a/README.md
+++ b/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`
diff --git a/app/(root)/events/[id]/page.tsx b/app/(root)/events/[id]/page.tsx
index d3f8846..72d2422 100644
--- a/app/(root)/events/[id]/page.tsx
+++ b/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
diff --git a/components/shared/Checkout.tsx b/components/shared/Checkout.tsx
new file mode 100644
index 0000000..5348e61
--- /dev/null
+++ b/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;
diff --git a/components/shared/CheckoutButton.tsx b/components/shared/CheckoutButton.tsx
new file mode 100644
index 0000000..b8c3af1
--- /dev/null
+++ b/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;