Merge pull request #3 from stcalica/stripe

Stripe

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .next
 next-env.d.ts
 .DS_Store
+.env*

app/api/checkout_sessions/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Stripe from 'stripe';
+
+const stripe = new Stripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
+
+export async function POST(req: NextRequest) {
+
+  const resp = await req.json();
+
+  try {
+
+    const data = JSON.parse(resp.body)
+    const priceId = data.priceId
+
+    const session = await stripe.checkout.sessions.create({
+      payment_method_types: ['card'],
+      line_items: [
+        {
+          price: priceId,
+          quantity: 1,
+          adjustable_quantity: {
+            enabled: true,
+            minimum: 1,
+            maximum: 999
+          }
+        },
+      ],
+      mode: 'payment',
+      success_url: `${process.env.HOST}/products/success`,
+      cancel_url: `${process.env.HOST}/products/canceled`,
+      custom_fields: [
+        {
+          key: "troop_number",
+          label: {
+            type: "custom",
+            custom: "Troop Number"
+          },
+          type: "text"
+        }
+      ]
+    });
+
+    return NextResponse.json({ session: session, ok: true });
+  } catch (err: any) {
+    return NextResponse.json({ error: err.message, ok: false }, { status: 500 });
+  }
+}

app/api/products/route.ts

@@ -0,0 +1,13 @@
+import { NextRequest, NextResponse } from 'next/server';
+import Stripe from 'stripe';
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
+
+export async function GET() {
+  try {
+    const products = await stripe.products.list({ limit: 10 });
+    return NextResponse.json(products.data);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message });
+  }
+}

app/products/page.tsx

@@ -0,0 +1,8 @@
+import type { NextPage } from "next";
+import { ProductPage } from "@/templates/ProductPage";
+
+const Products: NextPage = () => {
+    return <ProductPage />;
+};
+
+export default Products;

constants/navigation.tsx

@@ -40,6 +40,11 @@ export const navigation = [
         id: "5",
         title: "Contact Us",
         url: "/contact-us",
+    },
+    {
+        id: "6",
+        title: "T-Shirts",
+        url: "/products"
     }
 ];
 
@@ -96,6 +101,11 @@ export const menu = [
                 id: "5",
                 title: "Forms",
                 url: "/forms",
+            },
+            {
+                id: "6",
+                title: "T-Shirts",
+                url: "/tshirts"
             }
         ],
     },

next.config.mjs

@@ -2,10 +2,26 @@ const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig = {
   // Enables static exports
-  output: "export",
+  //output: "export",
   reactStrictMode: true,
   images: {
-    unoptimized: true // Disable Image Optimization
+    unoptimized: true, // Disable Image Optimization
+    domains: ["files.stripe.com"],
+
+  },
+  async headers() {
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          { key: "Access-Control-Allow-Credentials", value: "true" },
+          { key: "Access-Control-Allow-Origin", value: "*" },
+          { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
+          { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
+          { key: "Access-Control-Max-Age", value: "1800" }
+        ]
+      }
+    ]
   }
 
   // Conditionally set basePath and assetPrefix for GitHub Pages in production