Merge pull request #33 from shohan-pherones/shohan

stripe payment integrated

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@prisma/client": "^4.12.0",
     "@reduxjs/toolkit": "^1.9.3",
+    "@stripe/stripe-js": "^1.52.1",
+    "axios": "^1.3.5",
     "eslint": "8.37.0",
     "eslint-config-next": "13.2.4",
     "next": "13.2.4",
@@ -19,7 +21,8 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0",
     "react-redux": "^8.0.5",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "stripe": "^12.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.14",

pages/api/create-checkout-session.js

@@ -0,0 +1,42 @@
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+async function CreateStripeSession(req, res) {
+  const { items } = req.body;
+
+  const redirectURL =
+    process.env.NODE_ENV === "development"
+      ? "http://localhost:3000"
+      : "http://localhost:3000";
+
+  const modifiedItems = items.map((item) => ({
+    price_data: {
+      currency: "usd",
+      unit_amount: item.price * 100,
+      product_data: {
+        name: item.title,
+        images: [item.imageUrl],
+      },
+    },
+    quantity: item.quantity,
+  }));
+
+  const session = await stripe.checkout.sessions?.create({
+    payment_method_types: ["card"],
+    shipping_address_collection: {
+      allowed_countries: [],
+    },
+    line_items: modifiedItems,
+    mode: "payment",
+    success_url: redirectURL + "?status=success",
+    cancel_url: redirectURL + "?status=cancel",
+    metadata: {
+      images: JSON.stringify(items.map((item) => item.imageUrl)),
+    },
+  });
+
+  return res.status(200).json({
+    id: session?.id,
+  });
+}
+
+export default CreateStripeSession;

pages/cart.js

@@ -3,20 +3,49 @@ import { formatCurrency } from "@/utils/formatCurrency";
 import { useDispatch, useSelector } from "react-redux";
 import CartItem from "@/components/CartItem";
 import { clearCart } from "@/store/productSlice";
+import { loadStripe } from "@stripe/stripe-js";
+import axios from "axios";
 
 const CartPage = () => {
   const products = useSelector((state) => state.myShop.products);
   const dispatch = useDispatch();
 
+  /* STRIPE PROMISE */
+  const stripePromise = loadStripe(
+    process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+  );
+
+  /* CHECKOUT HANDLER */
+  const handleCheckout = async () => {
+    const stripe = await stripePromise;
+
+    /* SENDING POST REQ. TO CREATE A CHECKOUT SESSION */
+    const checkoutSession = await axios.post("/api/create-checkout-session", {
+      items: products,
+    });
+
+    /* REDIRECTING */
+    if (checkoutSession) {
+      console.log(checkoutSession);
+    }
+
+    const result = await stripe?.redirectToCheckout({
+      sessionId: checkoutSession?.data?.id,
+    });
+
+    if (result?.error) alert(result?.error.message);
+
+    dispatch(clearCart());
+  };
+
+  /* SUBTOTAL CALCULATION */
   const total = () => {
     const calcTotal = products.reduce(
       (acc, item) => (acc += item.quantity * item.price),
       0
     );
-
     const fixedTotal = +calcTotal.toFixed(2);
     const subtotal = formatCurrency(fixedTotal);
-
     return subtotal;
   };
 
@@ -80,13 +109,14 @@ const CartPage = () => {
               <p className="text-gray-400">
                 Shipping cost will calculate at the checkout.
               </p>
-              <Link
-                onClick={() => dispatch(clearCart())}
-                href="/checkout"
+
+              {/* CHECKOUT BUTTON */}
+              <button
+                onClick={handleCheckout}
                 className="checkout bg-cyan-500 w-full py-5 uppercase font-medium text-cyan-50 tracking-widest hover:bg-cyan-600 duration-300 text-center"
               >
                 Proceed to checkout
-              </Link>
+              </button>
             </div>
           </div>
         </>