🐞🪻 ↝ No calling your slam pieces at two thirty in the morning

Author: Gizmotronn

app/api/stripe/get-session-details/route.ts

@@ -5,7 +5,7 @@ const stripe = new Stripe('sk_test_51OoZttBTr6htJNMLfQTJv8IvKT5vdbtbtg9GPPp9Blgm
 
 export async function GET(req: NextRequest) {
   const session_id = req.nextUrl.searchParams.get('session_id');
-  console.log("Received session_id:", session_id); // Log the session_id to ensure it's correct
+  console.log("Received session_id:", session_id);
 
   if (!session_id) {
     return NextResponse.json({ error: 'Session ID is required' }, { status: 400 });
@@ -37,7 +37,7 @@ export async function GET(req: NextRequest) {
     const item = line_items.data[0];
     const productData = {
       name: item.description || 'No description available',
-      price: item.amount_total / 100, // price in dollars
+      price: item.amount_total / 100,
       last4: last4,
     };
 

app/page.tsx

@@ -5,14 +5,38 @@ import { useSearchParams } from 'next/navigation';
 import QueryString from 'query-string';
 import '../styles/Subscrip.css';
 
-import { SessionIdDisplay, Last4Display, ProductDetails, TransactionStatus, CheckoutForm } from '@/components/billing';
-import { Product } from '@/components/billing/productDetails';
+import { SessionIdDisplay, ProductDetails, TransactionStatus, CheckoutForm } from '@/components/billing';
+import { API_URL } from '@/config';
+
+type Product = {
+  name: string;
+  description: string;
+  price: number;  
+};
+
+type SessionDetails = {
+  customer_name: string;
+  customer_email: string;
+  status: string;
+  amount_total?: number;
+  currency: string;
+  payment_status: string;
+  invoice: string;
+  subscription: string;
+  created?: number;
+  expiration?: number;
+  success_url: string;
+  cancel_url: string;
+  current_transaction_date: string;
+  next_transaction_date: string;
+  product?: Product; 
+};
 
 const HomePage: React.FC = () => {
   const searchParams = useSearchParams();
   const [transactionStatus, setTransactionStatus] = useState<string | null>(null);
   const [sessionId, setSessionId] = useState<string | null>(null);
-  const [sessionDetails, setSessionDetails] = useState<any>(null);
+  const [sessionDetails, setSessionDetails] = useState<SessionDetails | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
@@ -34,23 +58,33 @@ const HomePage: React.FC = () => {
     }
   }, [searchParams]);
 
-  const fetchSessionDetails = async (sessionId: string) => {
-    try {
-      const response = await fetch(`/api/stripe/get-session-details?session_id=${sessionId}`);
-      const data = await response.json();
-      console.log('Session details:', data);
-
-      if (data.error) {
-        throw new Error(data.error);
-      }
-
-      setSessionDetails(data);
-    } catch (error) {
-      console.error('Error fetching session details:', error);
-    } finally {
-      setLoading(false);
+  async function fetchSessionDetails(sessionId: string) {
+    const response = await fetch(`${API_URL}/api/stripe/get-session-details?session_id=${sessionId}`);
+    const data = await response.json();
+    
+    if (response.ok) {
+      setSessionDetails({
+        customer_name: data.customer_name,
+        customer_email: data.customer_email,
+        status: data.status,
+        amount_total: data.amount_total,
+        currency: data.currency,
+        payment_status: data.payment_status,
+        invoice: data.invoice,
+        subscription: data.subscription,
+        created: data.created,
+        expiration: data.expiration,
+        success_url: data.success_url,
+        cancel_url: data.cancel_url,
+        current_transaction_date: data.current_transaction_date,
+        next_transaction_date: data.next_transaction_date,
+        product: data.product, // Assuming product data is part of the response
+      });
+      setLoading(false); // Set loading to false once data is fetched
+    } else {
+      console.error('Error fetching session details:', data.error);
     }
-  };
+  }
 
   return (
     <section className="relative">
@@ -64,17 +98,21 @@ const HomePage: React.FC = () => {
             <p><strong>Customer Name:</strong> {sessionDetails?.customer_name}</p>
             <p><strong>Customer Email:</strong> {sessionDetails?.customer_email}</p>
             <p><strong>Status:</strong> {sessionDetails?.status}</p>
-            <p><strong>Amount Total:</strong> {sessionDetails?.amount_total / 100} {sessionDetails?.currency.toUpperCase()}</p>
+            <p><strong>Amount Total:</strong> {sessionDetails?.amount_total ? sessionDetails.amount_total / 100 : 'N/A'} {sessionDetails?.currency.toUpperCase()}</p>
             <p><strong>Payment Status:</strong> {sessionDetails?.payment_status}</p>
             <p><strong>Invoice:</strong> {sessionDetails?.invoice}</p>
             <p><strong>Subscription:</strong> {sessionDetails?.subscription}</p>
-            <p><strong>Created At:</strong> {new Date(sessionDetails?.created * 1000).toLocaleString()}</p>
-            <p><strong>Expires At:</strong> {new Date(sessionDetails?.expiration * 1000).toLocaleString()}</p>
+            <p><strong>Created At:</strong> {sessionDetails?.created ? new Date(sessionDetails.created * 1000).toLocaleString() : 'N/A'}</p>
+            <p><strong>Expires At:</strong> {sessionDetails?.expiration ? new Date(sessionDetails.expiration * 1000).toLocaleString() : 'N/A'}</p>
             <p><strong>Success URL:</strong> <a href={sessionDetails?.success_url}>{sessionDetails?.success_url}</a></p>
             <p><strong>Cancel URL:</strong> <a href={sessionDetails?.cancel_url}>{sessionDetails?.cancel_url}</a></p>
+            <p><strong>Current Transaction Date:</strong> {sessionDetails?.current_transaction_date}</p>
+            <p><strong>Next Transaction Date:</strong> {sessionDetails?.next_transaction_date}</p>
           </div>
 
-          <ProductDetails product={sessionDetails?.product} />
+          {sessionDetails?.product && (
+            <ProductDetails product={sessionDetails.product} />
+          )}
         </>
       )}
       <CheckoutForm />

backend/core/settings.py

@@ -39,12 +39,12 @@
     'django.contrib.staticfiles',
     'rest_framework',
     'payments',
-    # 'corsheaders',
+    'corsheaders',
 ]
 
 MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware', 
     'django.middleware.security.SecurityMiddleware',
-    # 'corsheaders.middleware.CorsMiddleware',  # Should be above CommonMiddleware
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -53,7 +53,9 @@
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
-CORS_ALLOW_ALL_ORIGINS = True 
+CORS_ALLOWED_ORIGINS = [
+    'http://localhost:3000'
+]
 
 ROOT_URLCONF = 'core.urls'
 
@@ -138,4 +140,4 @@
 # Default primary key field type
 # https://docs.djangoproject.com/en/3.2/ref/settings/#default-auto-field
 
-DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

backend/payments/views.py

@@ -101,8 +101,6 @@ def get(self, request):
 
         try:
             session = stripe.checkout.Session.retrieve(session_id)
-
-            # Collect session details
             session_details = {
                 "id": session.id,
                 "status": session.status,
@@ -121,13 +119,28 @@ def get(self, request):
                 "payment_method_types": session.payment_method_types,
             }
 
+            # Fetch subscription details
+            if session.subscription:
+                subscription = stripe.Subscription.retrieve(session.subscription)
+
+                # Get the current transaction date (start of the current period)
+                current_transaction_date = subscription.current_period_start
+                next_transaction_date = subscription.current_period_end
+
+                # Convert to readable date format
+                from datetime import datetime
+                current_transaction_date = datetime.utcfromtimestamp(current_transaction_date).strftime('%Y-%m-%d')
+                next_transaction_date = datetime.utcfromtimestamp(next_transaction_date).strftime('%Y-%m-%d')
+
+                session_details["current_transaction_date"] = current_transaction_date
+                session_details["next_transaction_date"] = next_transaction_date
+
             line_items = stripe.checkout.Session.list_line_items(session.id, limit=1)
             product_details = []
             for item in line_items.data:
                 product_details.append({
                     'name': item.description,
                     'amount_total': item.amount_total,
-                    'image_url': item.image,
                 })
 
             session_details["line_items"] = product_details

components/billing/productDetails.tsx

@@ -1,7 +1,6 @@
 export interface Product {
     name: string;
     price: number;
-    image: string;
 };
 
 interface ProductDetailsProps {
@@ -17,11 +16,6 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product }) => {
 
     return (
         <div className="product mt-16 flex justify-between items-center w-[480px] h-[150px] bg-gray-100 shadow-md p-4 mx-auto">
-            <img
-                src={product.image}
-                alt={product.name}
-                className="w-[200px] h-[150px] object-cover"
-            />
             <div className="description pl-4">
                 <h3 className="text-xl font-semibold">{product.name}</h3>
                 <h5 className="text-lg text-gray-700">${product.price}</h5>

next.config.ts

@@ -1,7 +1,9 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  /* config options here */
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  images: { unoptimized: true },
 };
 
-export default nextConfig;
+module.exports = nextConfig;