Initialized Stripe API on frontend and added a backend route for Stri…

app/checkout/page.tsx

@@ -1,15 +1,14 @@
+'use client'
 import React from "react";
-import Navbar from '@/components/shop/Navbar';
-import Footer from '@/components/shop/Footer';
-
 import ShippingForm from "@/app/checkout/shippingForm";
-import Image from "next/image";
 import {PaymentOptions} from "@/app/checkout/paymentOptions";
-import Link from "next/link";
+import {Elements} from '@stripe/react-stripe-js'; 
 import Cart from "./cart"
+import {loadStripe} from '@stripe/stripe-js'; 
 
-export default async function CheckoutPage() {
+const stripePromise = loadStripe('STRIPE_API_KEY'); // replace this with the stripe API Key once we get one 
 
+export default async function CheckoutPage() {
     return (
         <div className="min-h-screen">
             <main className="bg-white py-16 px-16">
@@ -20,7 +19,9 @@ export default async function CheckoutPage() {
                             <ShippingForm/>
                         </div>
                         <div className="p-8 border border-gray-200 bg-gray-100 rounded-lg m-8">
-                            <PaymentOptions/>
+                            <Elements stripe = {stripePromise}>
+                                <PaymentOptions/>
+                            </Elements>
                         </div>
                     </div>
                     <div className='flex-1'>

app/checkout/paymentOptions.tsx

@@ -2,17 +2,54 @@
 import Image from 'next/image';
 import PayPalLogo from '@/public/img/PayPal.svg'
 import React from "react";
+import {useState} from 'react'; 
+import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js'; 
+
 
 export function PaymentOptions() {
+    const stripe = useStripe(); 
+    const elements = useElements(); 
+    const [paymentProcessing, setPaymentProcessing] = useState(false);
+
+    // note that the backend route has been created using express, please let Umar know if there are any problems with this 
+    async function handleSubmit(e: any) { // simple event handler function for submitting the form 
+        e.preventDefault(); 
+        setPaymentProcessing(true); 
+        const cardElement = elements.getElement(CardElement); // just ignore this error
+        const response = await fetch('/create-payment-intent', { 
+            method: "POST", 
+            headers: {"Content-Type" : "application/json"}, 
+            body: JSON.stringify({amount: 1000})
+        });
+
+        const {clientSecret} = await response.json(); 
+        const paymentResult = await stripe.confirmCardPayment(clientSecret, { // just ignore this error, this is to do with the fact that the variable is imported 
+            payment_method: {card: cardElement} // ignore this error for the same reasons given above 
+        }); 
+        setPaymentProcessing(false); 
+        if (paymentResult.error) {
+            console.error(paymentResult.error); 
+        } else {
+            console.log('Payment successful!');
+        }; 
+    };
+
     return(
-        <>
+       <>
             <p className="font-bold text-xl pb-2">Payment Options</p>
             <button className="w-full bg-white border border-gray-200 h-10 rounded-md px-4 flex flex-row justify-center items-center">
                 <Image src={PayPalLogo} alt="PayPal" width={90} height={20} className="contain"/>
             </button>
             <button className="w-full bg-green-600 hover:bg-green-500 text-white font-bold h-10 rounded-lg py-2 px-4 mt-4">
                 Buy Now
             </button>
+            <br />
+            <form onSubmit={handleSubmit}>
+                <CardElement />
+                <button type="submit" disabled={!stripe || paymentProcessing}>
+                {paymentProcessing ? "Processing..." : "Pay Now"}
+                </button>
+            </form>
         </>
-    )
-}
+    ); 
+}; 

app/checkout/stripeRoute.ts

@@ -0,0 +1,26 @@
+// custom API to create a payment intent for Stripe 
+// not too sure if this will work until we have access to the stripe key
+// please test if you have that 
+const express = require('express');  
+const bodyParser = require('body-parser'); 
+const stripe = require('stripe')('STRIPE_API_KEY'); // paste the api key here later 
+const app = express(); 
+
+// post route to stripe
+app.post('/create-payment-intent', async (req: { body: { amount: any; }; }, res: { send: (arg0: { clientSecret: any; }) => void; }) => {
+    const {amount} = req.body; // get the payment amount from the request's body 
+
+    try {
+        const paymentIntent = await stripe.paymentIntents.create({
+            amount,
+            currency: 'cad', 
+            automatic_payment_methods: {enabled: true}
+        }); 
+
+        res.send({clientSecret: paymentIntent.client_secret}); 
+    } catch (err) {
+        console.log(err); 
+    }
+});
+
+app.listen(69, () => console.log('Server route started successfully')); // 69 = funny lol