refactor: ♻️ streamline Stripe webhook handling and improve billing form loading state management

Author: moinulmoin

.cursor/mcp.json

@@ -0,0 +1,12 @@
+{
+  "mcpServers": {
+    "postgres": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@modelcontextprotocol/server-postgres",
+        "postgres://postgres:postgres@localhost:5432/localdb"
+      ]
+    }
+  }
+}

src/app/api/stripe/route.ts

@@ -37,7 +37,6 @@ export async function GET(req: NextRequest) {
       cancel_url: billingUrl,
       payment_method_types: ["card"],
       mode: "subscription",
-      billing_address_collection: "auto",
       customer_email: user.email!,
       line_items: [
         {

src/app/api/webhooks/stripe/route.ts

@@ -11,7 +11,6 @@ export async function POST(req: NextRequest) {
   const signature = headers.get("Stripe-Signature") as string;
 
   let event: Stripe.Event | undefined = undefined;
-
   try {
     event = stripe.webhooks.constructEvent(
       body,
@@ -28,9 +27,10 @@ export async function POST(req: NextRequest) {
     | Stripe.Checkout.Session
     | Stripe.Invoice;
 
-  console.log({ event, eventData });
-
-  if (event?.type === "checkout.session.completed") {
+  if (
+    event?.type === "checkout.session.completed" ||
+    event?.type === "checkout.session.async_payment_succeeded"
+  ) {
     const session = eventData as Stripe.Checkout.Session;
     // Retrieve the subscription details from Stripe.
     const subscription = await stripe.subscriptions.retrieve(
@@ -40,36 +40,49 @@ export async function POST(req: NextRequest) {
     // Update the user stripe into in our database.
     // Since this is the initial subscription, we need to update
     // the subscription id and customer id.
-    await prisma.user.update({
-      where: {
-        id: session?.metadata?.userId,
-      },
-      data: {
-        stripeSubscriptionId: subscription.id,
-        stripeCustomerId: subscription.customer as string,
-        stripePriceId: subscription.items.data[0].price.id,
-        stripeCurrentPeriodEnd: new Date(subscription.ended_at! * 1000),
-      },
-    });
-  }
-
-  if (event?.type === "invoice.payment_succeeded") {
+    try {
+      await prisma.user.update({
+        where: {
+          id: session?.metadata?.userId,
+        },
+        data: {
+          stripeSubscriptionId: subscription.id,
+          stripeCustomerId: subscription.customer as string,
+          stripePriceId: subscription.items.data[0].price.id,
+          stripeCurrentPeriodEnd: new Date(
+            subscription.items.data[0].current_period_end! * 1000
+          ),
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  } else if (event?.type === "invoice.payment_succeeded") {
     const invoice = eventData as Stripe.Invoice;
+
+    const subscriptionId = invoice.parent?.subscription_details?.subscription;
+
     // Retrieve the subscription details from Stripe.
     const subscription = await stripe.subscriptions.retrieve(
-      invoice.parent?.subscription_details?.subscription as string
+      subscriptionId as string
     );
 
     // Update the price id and set the new period end.
-    await prisma.user.update({
-      where: {
-        stripeSubscriptionId: subscription.id,
-      },
-      data: {
-        stripePriceId: subscription.items.data[0].price.id,
-        stripeCurrentPeriodEnd: new Date(subscription.ended_at! * 1000),
-      },
-    });
+    try {
+      await prisma.user.update({
+        where: {
+          stripeSubscriptionId: subscription.id,
+        },
+        data: {
+          stripePriceId: subscription.items.data[0].price.id,
+          stripeCurrentPeriodEnd: new Date(
+            subscription.items.data[0].current_period_end! * 1000
+          ),
+        },
+      });
+    } catch (error) {
+      console.error(error);
+    }
   }
 
   return new Response(null, { status: 200 });

src/components/billing-form.tsx

@@ -25,12 +25,12 @@ export function BillingForm({
   className,
   ...props
 }: BillingFormProps) {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  console.log(subscriptionPlan);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    setIsLoading(!isLoading);
+
+    setIsLoading(true);
 
     // Get a Stripe session URL.
     const response = await fetch("/api/stripe");
@@ -46,10 +46,12 @@ export function BillingForm({
     // Redirect to the Stripe session.
     // This could be a checkout page for initial upgrade.
     // Or portal to manage existing subscription.
-    const session = await response.json();
-    if (session) {
-      window.location.href = session.url;
+    const data = await response.json();
+    if (data.url) {
+      window.location.href = data.url;
     }
+
+    setIsLoading(false);
   }
 
   return (
@@ -67,10 +69,8 @@ export function BillingForm({
           {subscriptionPlan.description}
         </CardContent>
         <CardFooter className="flex flex-col items-start space-y-2 md:flex-row md:justify-between md:space-x-0">
-          <Button type="submit" disabled={isLoading}>
-            {isLoading && (
-              <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
-            )}
+          <Button type="submit" role="link" disabled={isLoading}>
+            {isLoading && <Icons.spinner className="h-4 w-4 animate-spin" />}
             {subscriptionPlan.isPro ? "Manage Subscription" : "Upgrade to PRO"}
           </Button>
           {subscriptionPlan.isPro ? (