feat: ✨ Implement subscription payment with strip

- Implement payment feature with stripe
- Updated middleware to handle webhook
- Add subscription button
- Update lib/utils.ts
- Add stripe package and react hot toast
- Create stripe webhook
- Add settings page
- Implement error handling
- Update readme

Payment feature with stripe implemented

Author: RicardoGEsteves

README.md

@@ -4,7 +4,7 @@ It is a `SaaS` (Software as a Service), `AI Platform`
 
 ### Stack
 
-`Nest.js 14, React, Typescript, OpenAI API, Replicate API, Clerk, Prisma, Zod, Postgres, Supabase, zustand, Stripe, Crisp, Tailwind, Shadcn-ui, Axios, React hook form, React markdown`.
+`Nest.js 14, React, Typescript, OpenAI API, Replicate API, Clerk, Prisma, Zod, Postgres, Supabase, zustand, Stripe, Crisp, Tailwind, Shadcn-ui, Axios, React hook form, react hot toast, React markdown`.
 
 ## Getting Started
 
@@ -24,12 +24,40 @@ bun dev
 
 Create:
 
+```
+
+CLERK_SECRET_KEY
+
+NEXT_PUBLIC_CLERK_SIGN_IN_URL
+NEXT_PUBLIC_CLERK_SIGN_UP_URL
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
+
+OPENAI_API_KEY
+
+REPLICATE_API_TOKEN
+
+NEXT_PUBLIC_APP_URL
+
+DATABASE_URL
+DATABASE_PASS
+
+STRIPE_API_KEY
+STRIPE_WEBHOOK_SECRET
+
+```
+
 ## For prisma
 
 ```bash
 # Generate prisma setup
 npx prisma init # than make your changes on prisma schema with your provider and connection string
 
+# Generate/Create tables
+
+npx prisma generate
+
 # Install prisma client
 npm i @prisma/client
 
@@ -38,4 +66,19 @@ npx prisma db push
 
 # Open prisma studio on localhost
 npx prisma studio
+
+# Reset database (You will lose all the data)
+npx prisma migrate reset
 ```
+
+## For stripe
+
+- Create the connection with the sample endpoint
+- Test in local environment
+- Download cli
+- $ stripe login (check documentation)
+- $ stripe listen --forward-to (localhost:3000/api/webhook)
+  now you got the secret, copy it and add it to your .env `STRIPE_WEBHOOK_SECRET`
+- $ stripe trigger (trigger events with the cli)
+- Keep dev running , prisma and stripe cli bash's
+- Go to stipe website and search customer portal and activate 'Activate test link'

app/(dashboard)/(routes)/code/page.tsx

@@ -6,6 +6,7 @@ import { Code } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
 import OpenAI from "openai";
 import ReactMarkdown from "react-markdown";
 
@@ -55,6 +56,7 @@ const CodePage = () => {
       if (error?.response?.status === 403) {
         proModal.onOpen();
       } else {
+        toast.error("Something went wrong.");
       }
     } finally {
       router.refresh();

app/(dashboard)/(routes)/conversation/page.tsx

@@ -5,6 +5,7 @@ import * as z from "zod";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { MessageSquare } from "lucide-react";
+import toast from "react-hot-toast";
 import { useForm } from "react-hook-form";
 
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -56,6 +57,7 @@ export default function ConversationPage() {
       if (error?.response?.status === 403) {
         proModal.onOpen();
       } else {
+        toast.error("Something went wrong.");
       }
     } finally {
       router.refresh();

app/(dashboard)/(routes)/dashboard/constants.ts

@@ -1,7 +1,5 @@
 import { Code, ImageIcon, MessageSquare, Music, VideoIcon } from "lucide-react";
 
-export const MAX_FREE_COUNTS = 5;
-
 export const tools = [
   {
     label: "Conversation",

app/(dashboard)/(routes)/image/page.tsx

@@ -8,6 +8,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { Download, ImageIcon } from "lucide-react";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
 
 import Heading from "@/components/heading";
 import { Button } from "@/components/ui/button";
@@ -56,6 +57,7 @@ const PhotoPage = () => {
       if (error?.response?.status === 403) {
         proModal.onOpen();
       } else {
+        toast.error("Something went wrong.");
       }
     } finally {
       router.refresh();

app/(dashboard)/(routes)/music/page.tsx

@@ -6,6 +6,7 @@ import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
 import { Music, Send } from "lucide-react";
 
 import Heading from "@/components/heading";
@@ -44,6 +45,7 @@ const MusicPage = () => {
       if (error?.response?.status === 403) {
         proModal.onOpen();
       } else {
+        toast.error("Something went wrong.");
       }
     } finally {
       router.refresh();

app/(dashboard)/(routes)/settings/constants.ts

@@ -0,0 +1,7 @@
+import * as z from "zod";
+
+export const formSchema = z.object({
+  prompt: z.string().min(1, {
+    message: "Prompt is required.",
+  }),
+});

app/(dashboard)/(routes)/settings/page.tsx

@@ -0,0 +1,31 @@
+import { Settings } from "lucide-react";
+
+import Heading from "@/components/heading";
+import { SubscriptionButton } from "@/components/subscription-button";
+import { checkSubscription } from "@/lib/subscription";
+
+const SettingsPage = async () => {
+  const isPro = await checkSubscription();
+
+  return (
+    <div>
+      <Heading
+        title="Settings"
+        description="Manage account settings."
+        icon={Settings}
+        iconColor="text-gray-700"
+        bgColor="bg-gray-700/10"
+      />
+      <div className="px-4 lg:px-8 space-y-4">
+        <div className="text-muted-foreground text-sm">
+          {isPro
+            ? "You are currently on a Pro plan."
+            : "You are currently on a free plan."}
+        </div>
+        <SubscriptionButton isPro={isPro} />
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPage;

app/(dashboard)/(routes)/video/page.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form";
 
 import { FileAudio } from "lucide-react";
 import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
 
 import Heading from "@/components/heading";
 import { Button } from "@/components/ui/button";
@@ -45,6 +46,7 @@ const VideoPage = () => {
       if (error?.response?.status === 403) {
         proModal.onOpen();
       } else {
+        toast.error("Something went wrong.");
       }
     } finally {
       router.refresh();

app/(dashboard)/error.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { Empty } from "@/components/empty";
+
+const Error = () => {
+  return <Empty label="Something went wrong." />;
+};
+
+export default Error;

app/api/stripe/route.ts

@@ -0,0 +1,67 @@
+import { auth, currentUser } from "@clerk/nextjs";
+import { NextResponse } from "next/server";
+
+import prismadb from "@/lib/prismadb";
+import { stripe } from "@/lib/stripe";
+import { absoluteUrl } from "@/lib/utils";
+
+const settingsUrl = absoluteUrl("/settings");
+
+export async function GET() {
+  try {
+    const { userId } = auth();
+    const user = await currentUser();
+
+    if (!userId || !user) {
+      return new NextResponse("Unauthorized", { status: 401 });
+    }
+
+    const userSubscription = await prismadb.userSubscription.findUnique({
+      where: {
+        userId,
+      },
+    });
+
+    if (userSubscription && userSubscription.stripeCustomerId) {
+      const stripeSession = await stripe.billingPortal.sessions.create({
+        customer: userSubscription.stripeCustomerId,
+        return_url: settingsUrl,
+      });
+
+      return new NextResponse(JSON.stringify({ url: stripeSession.url }));
+    }
+
+    const stripeSession = await stripe.checkout.sessions.create({
+      success_url: settingsUrl,
+      cancel_url: settingsUrl,
+      payment_method_types: ["card"],
+      mode: "subscription",
+      billing_address_collection: "auto",
+      customer_email: user.emailAddresses[0].emailAddress,
+      line_items: [
+        {
+          price_data: {
+            currency: "EUR",
+            product_data: {
+              name: "Omniscient Pro",
+              description: "Unlimited AI Generations",
+            },
+            unit_amount: 2000,
+            recurring: {
+              interval: "month",
+            },
+          },
+          quantity: 1,
+        },
+      ],
+      metadata: {
+        userId,
+      },
+    });
+
+    return new NextResponse(JSON.stringify({ url: stripeSession.url }));
+  } catch (error) {
+    console.log("[STRIPE_ERROR]", error);
+    return new NextResponse("Internal Error", { status: 500 });
+  }
+}

app/api/webhook/route.ts

@@ -0,0 +1,67 @@
+import Stripe from "stripe";
+import { headers } from "next/headers";
+import { NextResponse } from "next/server";
+
+import prismadb from "@/lib/prismadb";
+import { stripe } from "@/lib/stripe";
+
+export async function POST(req: Request) {
+  const body = await req.text();
+  const signature = headers().get("Stripe-Signature") as string;
+
+  let event: Stripe.Event;
+
+  try {
+    event = stripe.webhooks.constructEvent(
+      body,
+      signature,
+      process.env.STRIPE_WEBHOOK_SECRET!
+    );
+  } catch (error: any) {
+    return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 });
+  }
+
+  const session = event.data.object as Stripe.Checkout.Session;
+
+  if (event.type === "checkout.session.completed") {
+    const subscription = await stripe.subscriptions.retrieve(
+      session.subscription as string
+    );
+
+    if (!session?.metadata?.userId) {
+      return new NextResponse("User id is required", { status: 400 });
+    }
+
+    await prismadb.userSubscription.create({
+      data: {
+        userId: session?.metadata?.userId,
+        stripeSubscriptionId: subscription.id,
+        stripeCustomerId: subscription.customer as string,
+        stripePriceId: subscription.items.data[0].price.id,
+        stripeCurrentPeriodEnd: new Date(
+          subscription.current_period_end * 1000
+        ),
+      },
+    });
+  }
+
+  if (event.type === "invoice.payment_succeeded") {
+    const subscription = await stripe.subscriptions.retrieve(
+      session.subscription as string
+    );
+
+    await prismadb.userSubscription.update({
+      where: {
+        stripeSubscriptionId: subscription.id,
+      },
+      data: {
+        stripePriceId: subscription.items.data[0].price.id,
+        stripeCurrentPeriodEnd: new Date(
+          subscription.current_period_end * 1000
+        ),
+      },
+    });
+  }
+
+  return new NextResponse(null, { status: 200 });
+}

app/layout.tsx

@@ -1,8 +1,8 @@
-import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { ClerkProvider } from "@clerk/nextjs";
 import { constructMetadata } from "@/lib/metadata";
 
+import { ToasterProvider } from "@/components/toaster-provider";
 import { ModalProvider } from "@/components/modal-provider";
 
 import "./globals.css";
@@ -18,9 +18,12 @@ export default function RootLayout({
 }) {
   return (
     <ClerkProvider>
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
         <body className={inter.className}>
+          <ToasterProvider />
+
           <ModalProvider />
+
           {children}
         </body>
       </html>

components/pro-modal.tsx

@@ -3,7 +3,7 @@
 import axios from "axios";
 import { useState } from "react";
 import { Check, Zap } from "lucide-react";
-// import { toast } from "react-hot-toast";
+import { toast } from "react-hot-toast";
 
 import {
   Dialog,
@@ -31,7 +31,7 @@ export const ProModal = () => {
 
       window.location.href = response.data.url;
     } catch (error) {
-      //   toast.error("Something went wrong");
+      toast.error("Something went wrong");
     } finally {
       setLoading(false);
     }