Added paypal payment button

Author: JaisonBinns

client/package-lock.json

@@ -14,6 +14,7 @@
     "react-dropzone": "^11.0.1",
     "react-icons": "^3.7.0",
     "react-image-gallery": "^1.0.7",
+    "react-paypal-express-checkout": "^1.0.5",
     "react-redux": "^7.1.0-rc.1",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.4.1",

client/package.json

@@ -5,3 +5,4 @@ export const LOGOUT_USER = "logout_user";
 export const ADD_TO_CART_USER = "add_to_cart_user";
 export const GET_CART_ITEMS_USER = "get_cart_items_user";
 export const REMOVE_CART_ITEM_USER = "remove_cart_item_user";
+export const ON_SUCCESS_BUY_USER = "on_success_buy_user";

client/src/_actions/types.js

@@ -7,6 +7,7 @@ import {
   ADD_TO_CART_USER,
   GET_CART_ITEMS_USER,
   REMOVE_CART_ITEM_USER,
+  ON_SUCCESS_BUY_USER,
 } from "./types";
 import { USER_SERVER } from "../components/Config.js";
 
@@ -108,3 +109,10 @@ export function removeCartItem(id) {
     payload: request,
   };
 }
+
+export function onSuccessBuy(data) {
+  return {
+    type: ON_SUCCESS_BUY_USER,
+    payload: data,
+  };
+}

client/src/_actions/user_actions.js

@@ -6,6 +6,7 @@ import {
   ADD_TO_CART_USER,
   GET_CART_ITEMS_USER,
   REMOVE_CART_ITEM_USER,
+  ON_SUCCESS_BUY_USER,
 } from "../_actions/types";
 
 export default function (state = {}, action) {
@@ -35,6 +36,15 @@ export default function (state = {}, action) {
         cartDetail: action.payload.cartDetail,
         userData: { ...state.userData, cart: action.payload.cart },
       };
+    case ON_SUCCESS_BUY_USER:
+      return {
+        ...state,
+        userData: {
+          ...state.userData,
+          cart: action.payload.cart,
+        },
+        cartDetail: action.payload.cartDetail,
+      };
     default:
       return state;
   }

client/src/_reducers/user_reducer.js

@@ -0,0 +1,61 @@
+import React from "react";
+import PaypalExpressBtn from "react-paypal-express-checkout";
+
+export default class MyApp extends React.Component {
+  render() {
+    const onSuccess = (payment) => {
+      // Congratulation, it came here means everything's fine!
+      console.log("The payment was succeeded!", payment);
+      // You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
+      this.props.onSuccess(payment);
+    };
+
+    const onCancel = (data) => {
+      // User pressed "cancel" or close Paypal's popup!
+      console.log("The payment was cancelled!", data);
+      // You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
+    };
+
+    const onError = (err) => {
+      // The main Paypal's script cannot be loaded or somethings block the loading of that script!
+      console.log("Error!", err);
+      // Because the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
+      // => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
+    };
+
+    let env = "sandbox"; // you can set here to 'production' for production
+    let currency = "USD"; // or you can set this value from your props or state
+    let total = this.props.toPay; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
+    // Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/
+
+    const client = {
+      sandbox:
+        "ATdlRK1n0Wiy43MJXKOASZPazDEKXE-VI02OxJxtUBmz9MKUqbIsrhYSVu_E_g5QBesorpy24bcnGKyo",
+      production: "YOUR-PRODUCTION-APP-ID",
+    };
+    // In order to get production's app-ID, you will have to send your app to Paypal for approval first
+    // For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"):
+    //   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
+    // For production app-ID:
+    //   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/
+
+    // NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!
+    return (
+      <PaypalExpressBtn
+        env={env}
+        client={client}
+        currency={currency}
+        total={total}
+        onError={onError}
+        onSuccess={onSuccess}
+        onCancel={onCancel}
+        style={{
+          size: "large",
+          color: "blue",
+          shape: "rect",
+          label: "checkout",
+        }}
+      />
+    );
+  }
+}

client/src/components/utils/Paypal.js

@@ -1,8 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
-import { getCartItems, removeCartItem } from "../../../_actions/user_actions";
+import {
+  getCartItems,
+  removeCartItem,
+  onSuccessBuy,
+} from "../../../_actions/user_actions";
 import UserCardBlock from "./UserCardBlock";
 import { Result, Empty } from "antd";
+import Paypal from "../../utils/Paypal";
+import Axios from "axios";
 
 function CartPage(props) {
   const dispatch = useDispatch();
@@ -54,6 +60,37 @@ function CartPage(props) {
     });
   };
 
+  const transactionSuccess = (data) => {
+    let variables = {
+      cartDetail: props.user.cartDetail,
+      paymentData: data,
+    };
+
+    Axios.post("/api/users/successBuy", variables).then((response) => {
+      if (response.data.success) {
+        setShowSuccess(true);
+        setShowTotal(false);
+
+        dispatch(
+          onSuccessBuy({
+            cart: response.data.cart,
+            cartDetail: response.data.cartDetail,
+          })
+        );
+      } else {
+        alert("Failed to Purchase Items");
+      }
+    });
+  };
+
+  const transactionError = () => {
+    console.log("Paypal error");
+  };
+
+  const transactionCancelled = () => {
+    console.log("Transaction cancelled");
+  };
+
   return (
     <div style={{ width: "85%", margin: "3rem auto" }}>
       <h1>My Cart </h1>
@@ -82,6 +119,15 @@ function CartPage(props) {
           </div>
         )}
       </div>
+
+      {ShowTotal && (
+        <Paypal
+          toPay={Total}
+          onSuccess={transactionSuccess}
+          transactionError={transactionError}
+          transactionCancelled={transactionCancelled}
+        />
+      )}
     </div>
   );
 }

client/src/components/views/CartPage/CartPage.js

@@ -16,6 +16,7 @@
   "author": "John ahn",
   "license": "ISC",
   "dependencies": {
+    "async": "^3.2.0",
     "bcrypt": "^3.0.6",
     "body-parser": "^1.18.3",
     "cookie-parser": "^1.4.3",

package-lock.json

@@ -0,0 +1,24 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const paymentSchema = mongoose.Schema(
+  {
+    user: {
+      type: Array,
+      default: [],
+    },
+    data: {
+      type: Array,
+      default: [],
+    },
+    product: {
+      type: Array,
+      default: [],
+    },
+  },
+  { timestamp: true }
+);
+
+const Payment = mongoose.model("Payment", paymentSchema);
+
+module.exports = { Payment };

package.json

@@ -3,6 +3,9 @@ const router = express.Router();
 const { User } = require("../models/User");
 const { Product } = require("../models/Product");
 const { auth } = require("../middleware/auth");
+const { Payment } = require("../models/Payment");
+
+const async = require("async");
 
 //=================================
 //             User
@@ -136,4 +139,69 @@ router.get("/removeFromCart", auth, (req, res) => {
   );
 });
 
+router.post("/successBuy", auth, (req, res) => {
+  let history = [];
+  let transactionData = {};
+
+  req.body.cartDetail.forEach((item) => {
+    history.push({
+      dateOfPurchase: Date.now(),
+      name: item.title,
+      id: item._id,
+      price: item.price,
+      quantity: item.quantity,
+      paymentId: req.body.paymentData.paymentID,
+    });
+  });
+
+  transactionData.user = {
+    id: req.user._id,
+    name: req.user.name,
+    lastname: req.user.lastname,
+    email: req.user.email,
+  };
+
+  transactionData.data = req.body.paymentData;
+  transactionData.product = history;
+
+  User.findOneAndUpdate(
+    { _id: req.user._id },
+    { $push: { history: history }, $set: { cart: [] } },
+    { new: true },
+    (err, user) => {
+      if (err) return res.json({ success: false, err });
+
+      const payment = new Payment(transactionData);
+      payment.save((err, doc) => {
+        if (err) return res.json({ success: false, err });
+
+        let products = [];
+        doc.product.forEach((item) => {
+          products.push({ id: item.id, quantity: item.quantity });
+        });
+
+        async.eachSeries(
+          products,
+          (item, callback) => {
+            Product.update(
+              { _id: item.id },
+              { $inc: { sold: item.quantity } },
+              { new: false },
+              callback
+            );
+          },
+          (err) => {
+            if (err) return res.json({ success: false, err });
+            res.status(200).json({
+              success: true,
+              cart: user.cart,
+              cartDetail: [],
+            });
+          }
+        );
+      });
+    }
+  );
+});
+
 module.exports = router;