feat: payment gateway

pranjalmahajan96 · Sep 16, 2021 · 37d65f5 · 37d65f5
1 parent 3e97f50
commit 37d65f5
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 13 deletions.
diff --git a/src/components/cart/Cart.js b/src/components/cart/Cart.js
@@ -27,7 +27,7 @@ export const Cart = () => {
         setShowError(false);
       }
     })();
-  });
+  },[]);
 
   return (
     <div>

diff --git a/src/components/cart/CartCard.js b/src/components/cart/CartCard.js
@@ -15,10 +15,6 @@ export const CartCard = ({ item }) => {
       <div>
         <h3>{item?.product?.name}</h3>
         <h3>₹{item?.product?.price}</h3>
-        <button className="btn btn-outline" onClick={() => incQtyCB(item)}>
-          +
-        </button>
-        <span>{item?.qty}</span>
         <button
           className={
             item?.qty > 1 ? "btn btn-outline" : "btn btn-outline btn-disabled"
@@ -28,6 +24,10 @@ export const CartCard = ({ item }) => {
         >
           -
         </button>
+        <span>{item?.qty}</span>
+        <button className="btn btn-outline" onClick={() => incQtyCB(item)}>
+          +
+        </button>
         <span>Sub-Total: ₹{item?.qty * item?.product?.price}</span>
         <div>
           <button

diff --git a/src/components/cart/CartTotal.js b/src/components/cart/CartTotal.js
@@ -1,12 +1,76 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import { useData } from "../../hooks/useData";
+import { useNavigate } from "react-router-dom";
+
 const calcTotal = ({ cart }) => {
-  let total = [];
-  total = cart.map((item) => item?.qty * item?.product?.price);
-  total = total.reduce((acc, val) => acc + val, 0);
-  return total;
+  const {setTotal} = useData();
+  let totalAmt = [];
+  totalAmt = cart.map((item) => item?.qty * item?.product?.price);
+  totalAmt = totalAmt.reduce((acc, val) => acc + val, 0);
+  setTotal(totalAmt);
+  return totalAmt;
 };
 
 export const CartTotal = (cart) => {
-  const total = 0;
+  const navigate = useNavigate();
+  const {total} = useData();
+
+  const loadScript = (src) => {
+    return new Promise((resolve) => {
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = () => {
+            resolve(true);
+        };
+        script.onerror = () => {
+            resolve(false);
+        };
+        document.body.appendChild(script);
+    });
+};
+
+useEffect(() => {
+  loadScript('https://checkout.razorpay.com/v1/checkout.js');
+});
+
+function payRazorpay() {
+  console.log("pay!")
+  displayRazorpay();
+}
+
+async function displayRazorpay() {
+  const { data } = await axios.post(`https://FitKartAPI.pranjalmahajan.repl.co/orders/new`, {
+      total
+  });
+
+  const options = {
+      key: 'rzp_test_tYEQjq3P5lM1Rl',
+      currency: 'INR',
+      amount: total,
+      name: 'Fitkart',
+      description: 'Fitkartt',
+      order_id: data.id,
+      handler: function (response) {
+      console.log(response.razorpay_payment_id);
+      console.log(response.razorpay_order_id);
+      },
+      prefill: {
+          email: "test@gmail.com",
+          contact: ''
+      }
+  };
+
+  const paymentObject = new window.Razorpay(options);
+  paymentObject.open();
+
+  if (data.success === true) {
+      navigate('/orders');
+      // const { cart } = await axios.post(`${MAIN_URL}/payment/delete`);
+      // setItemsInCart(cart);
+  }
+}
+
   return cart.length === 0 ? (
     <div className="card">
       <div>Cart Total: ₹{total}</div>
@@ -15,7 +79,13 @@ export const CartTotal = (cart) => {
   ) : (
     <div className="card">
       <div>Cart Total: ₹{calcTotal(cart)}</div>
-      <button className="btn btn-filled btn-checkout">Checkout</button>
+      <button className="btn btn-filled btn-checkout" onClick={() => {
+        console.log("checkout clicked")
+        console.log({total})
+        payRazorpay()
+        console.log("checkout clicked 1")
+        }}>
+          Checkout</button>
     </div>
   );
 };
diff --git a/src/components/orders/Orders.js b/src/components/orders/Orders.js
@@ -0,0 +1,27 @@
+
+// import { useCart } from '../contexts/CartContext';
+
+export const Orders = () => {
+    // let { orderId, paymentId } = useCart();
+    return (
+        // <div>
+        //     <div className="order-box">
+        //         <img className="order-img" src={} alt="order" />
+        //         <h2 className="order-text">Order Confirmed!</h2>
+        //         {orderId && (
+        //             <div className="order-text">
+        //                 Order ID: <strong>{orderId}</strong>
+        //             </div>
+        //         )}
+        //         {paymentId && (
+        //             <div className="order-text">
+        //                 Transaction ID: <strong>{paymentId}</strong>
+        //             </div>
+        //         )}
+        //     </div>
+        // </div>
+        <div>
+            Orders Page!
+        </div>
+    );
+};
diff --git a/src/contexts/authContext.js b/src/contexts/authContext.js
@@ -12,6 +12,7 @@ export const AuthProvider = ({ children }) => {
 
     const signupHandlerAsync = async ({name, username, email, password}) => {
         try{
+            console.log("auth-context",name, username, email, password)
             const response = await axios.post("https://FitKartAPI.pranjalmahajan.repl.co/user/signup", {
                 name,
                 username,
@@ -25,6 +26,7 @@ export const AuthProvider = ({ children }) => {
                 }));
                 setLogin(true);
                 setToken(response.data.user.token);
+                navigate("/");
                 console.log("user signed up");
             }
             console.log(response.data);
@@ -47,6 +49,7 @@ export const AuthProvider = ({ children }) => {
              }));
              setLogin(true);
              setToken(response.data.user.token);
+             navigate("/");
              console.log("user logged in");
             //  console.log(response.data);
             }  

diff --git a/src/contexts/productData.js b/src/contexts/productData.js
@@ -1,4 +1,4 @@
-import { createContext, useReducer } from "react";
+import { createContext, useReducer, useState } from "react";
 import { dataReducer } from "../reducer/reducer";
 
 const initialState = {
@@ -13,6 +13,7 @@ export const DataContext = createContext();
 
 export const DataProvider = ({ children }) => {
   const [state, dispatch] = useReducer(dataReducer, initialState);
+  const [total, setTotal] = useState(0);
 
   return (
     <>
@@ -23,7 +24,8 @@ export const DataProvider = ({ children }) => {
           dispatch,
           sortBy: state.sortBy,
           fastDeliveryOnly: state.fastDeliveryOnly,
-          includeOutOfStock: state.includeOutOfStock
+          includeOutOfStock: state.includeOutOfStock,
+          total, setTotal
         }}
       >
         {children}