Merge pull request #26 from Vero-Ventures/feature/add-stripe

Add Stripe Checkout #21

package.json

@@ -17,9 +17,11 @@
     ]
   },
   "dependencies": {
+    "@stripe/stripe-js": "^3.4.0",
     "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "stripe": "^15.5.0"
   },
   "devDependencies": {
     "eslint": "^8",

src/app/api/stripe/route.js

@@ -0,0 +1,30 @@
+import { NextResponse } from 'next/server';
+const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
+
+export async function POST(req) {
+  const baseURL = req.headers.get('referer');
+
+  try {
+    // Create Checkout Sessions from body params.
+    const session = await stripe.checkout.sessions.create({
+      line_items: [
+        {
+          // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
+          price: process.env.STRIPE_JOB_POSTING_PRICE_ID,
+          quantity: 1,
+        },
+      ],
+      mode: 'payment',
+      success_url: `${baseURL}/?paymentStatus=true`,
+      cancel_url: `${baseURL}/?paymentStatus=false`,
+    });
+
+    return NextResponse.json({url: session.url}, {status: 303, headers: {
+      'Location': session.url
+    }});
+
+  } catch (err) {
+    return NextResponse.json(err.message, {status: err.statusCode || 500});
+  }
+
+}

src/app/payment/page.js

@@ -0,0 +1,61 @@
+'use client'
+
+import { loadStripe } from '@stripe/stripe-js';
+import { useSearchParams } from "next/navigation";
+
+// Make sure to call `loadStripe` outside of a component’s render to avoid
+// recreating the `Stripe` object on every render.
+loadStripe(process.env.STRIPE_PUBLISHABLE_KEY);
+
+// TODO: Needs styling
+export default function PreviewPage() {
+    const searchParams = useSearchParams();
+
+    const paymentStatus = searchParams.get('paymentStatus');
+
+    if (paymentStatus) {
+        return (
+            <>
+                <h1>Payment Status</h1>
+                <p>Payment was successful: {paymentStatus}</p>
+            </>
+        )
+    }
+
+    return (
+        <form action="/api/stripe" method="POST">
+        <section>
+            <button type="submit" role="link">
+            Checkout
+            </button>
+        </section>
+        <style jsx>
+            {`
+            section {
+                background: #ffffff;
+                display: flex;
+                flex-direction: column;
+                width: 400px;
+                height: 112px;
+                border-radius: 6px;
+                justify-content: space-between;
+            }
+            button {
+                height: 36px;
+                background: #556cd6;
+                border-radius: 4px;
+                color: white;
+                border: 0;
+                font-weight: 600;
+                cursor: pointer;
+                transition: all 0.2s ease;
+                box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
+            }
+            button:hover {
+                opacity: 0.8;
+            }
+            `}
+        </style>
+        </form>
+    );
+}