paypal payment method added

package.json

@@ -6,15 +6,17 @@
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "@paypal/react-paypal-js": "^7.8.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "algoliasearch": "^4.8.3",
     "axios": "^0.21.0",
     "firebase": "^7.21.0",
     "material-ui-dropzone": "^3.4.0",
-    "node-sass": "^4.14.1",
     "react": "^16.13.1",
+    "react-alert": "^7.0.3",
+    "react-alert-template-basic": "^1.0.2",
     "react-dom": "^16.13.1",
     "react-id-swiper": "^4.0.0",
     "react-material-ui-carousel": "^2.1.1",

src/components/frontend/cart/Payment.js

@@ -22,6 +22,7 @@ import {
 import { configs } from "../../../config/configs";
 import { Link } from "react-router-dom";
 import ScrollToTop from "../../common/ScrollToTop";
+import PaypalCheckoutButton from "./PaypalCheckoutButton";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -85,7 +86,7 @@ function Payment(props) {
     var success = !props.status && props.msg === "SUCCESS";
     return (
       <div style={modalStyle} className={classes.paper}>
-        <Grid container justify="center">
+        <Grid container justify = "center">
           <Grid item xs={12}>
             <h2 className={classes.confirmMsg}>
               {success ? "Order Placed" : "Failure Placing Order"}
@@ -183,7 +184,12 @@ function Payment(props) {
     if (!props.status && props.msg === "SUCCESS") {
       history.push("/account#orders");
       props.resetPaymentState();
-    }
+    } 
+  };
+
+  const product = {
+    description : configs.description,
+    price:calcTPrice(props.cart) * 100
   };
 
   return (
@@ -193,6 +199,19 @@ function Payment(props) {
         <Grid item xs={12} lg={4}>
           <CheckoutStepper activeStep={2} />
           <PaymentDetails />
+
+{/*--------------------PayPal CheckOut Button For payment--------------------*/}
+
+          <div className="paypal">
+            <p className="checkout-title">PAY WITH PAYPAL</p>
+            <div className="paypal-button-container">
+
+              <PaypalCheckoutButton product ={ product }/>
+
+            </div>
+         </div>
+
+
           <div className={classes.paymentType}>
             <FormControl component="fieldset">
               <FormGroup aria-label="position" row>

src/components/frontend/cart/PaypalCheckoutButton.js

@@ -0,0 +1,76 @@
+import React, { useEffect } from 'react'
+import { useHistory } from "react-router-dom"
+import {PayPalButtons} from '@paypal/react-paypal-js'  // paypal payment package
+import { useState } from 'react';
+import {useAlert} from "react-alert"  // Package for popup alert
+
+
+function PaypalCheckoutButton(props) {
+
+    const {product} = props;  // destructuring product details passed through props
+
+    const alert = useAlert()
+
+    const [orderID, setOrderID] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [ErrorMessage, setErrorMessage] = useState("");
+
+    const navigate = useHistory();
+
+    // Checking If Payment is Successful or not
+
+    useEffect(()=>{
+      if(success){
+        navigate.push('/account#orders')
+    }else{
+        alert.show(ErrorMessage)
+    }
+    },[ErrorMessage])
+
+
+
+  return  <PayPalButtons
+  style={{
+    color:"silver",
+    layout:"horizontal",
+    height:48,
+    tagline:false,
+    shape:"pill"
+  }}
+
+  //Creating order and payment
+
+  createOrder={(data,actions)=>{
+    return actions.order.create({
+        purchase_units:[{
+            description:product.description,
+            amount:{
+                currency_code:"INR",
+                value:product.price
+            },
+        }]
+    }).then((orderID)=>{
+        setOrderID(orderID);
+    })
+  }}
+
+  //fuction to know wheather the order is successful or not
+
+  onApprove={(data,actions)=>{
+   return actions.order.capture().then(function(details){
+    const {payer} = details
+    setSuccess(true)
+   })
+  }}
+
+  //popup alert if there is an error in payment
+
+  onError = {(data, actions)=>{
+    setErrorMessage("An Error occured with your payment")
+    alert.show(ErrorMessage)
+  }}
+
+  />
+}
+
+export default PaypalCheckoutButton

src/config/configs.js

@@ -50,3 +50,8 @@ configs.functionsURL =
   "https://us-central1-suryakantham-a7982.cloudfunctions.net/payment";
 
 configs.usingAlgoliaFree = true;
+
+// PayPal 
+configs.paypal={
+  client_id:process.env.REACT_APP_PAYPAL_CLIENT_ID
+}

src/index.js

@@ -8,6 +8,9 @@ import rootReducer from "./store/reducers/RootReducer";
 import { createStore, applyMiddleware } from "redux";
 import { Provider, useSelector } from "react-redux";
 import thunk from "redux-thunk";
+import {PayPalScriptProvider} from "@paypal/react-paypal-js"
+import AlertTemplate from 'react-alert-template-basic';
+import { transitions, positions, Provider as AlertProvider } from 'react-alert'
 import {
   reduxFirestore,
   getFirestore,
@@ -21,6 +24,7 @@ import {
 import firebase, { firebaseConfig } from "./config/firebaseConfig";
 import { composeWithDevTools } from "redux-devtools-extension";
 import Loading from "./components/frontend/Loading";
+import { configs } from "./config/configs";
 
 const store = createStore(
   rootReducer,
@@ -30,6 +34,8 @@ const store = createStore(
   )
 );
 
+
+
 function AuthIsLoaded({ children }) {
   const auth = useSelector((state) => state.firebase.auth);
   if (!isLoaded(auth)) return <Loading />;
@@ -50,16 +56,28 @@ const rrfProps = {
   createFirestoreInstance,
 };
 
+const options = {
+  position: positions.BOTTOM_CENTER,
+  timeout: 5000,
+  offset: '30px',
+  transition: transitions.SCALE
+}
+
+
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
+      <PayPalScriptProvider options={{"client-id":configs.paypal.client_id}}>
       <ReactReduxFirebaseProvider {...rrfProps}>
         <BrowserRouter>
           <AuthIsLoaded>
+            <AlertProvider template={AlertTemplate}{...options}>
             <App />
+            </AlertProvider>
           </AuthIsLoaded>
         </BrowserRouter>
       </ReactReduxFirebaseProvider>
+      </PayPalScriptProvider>
     </Provider>
   </React.StrictMode>,
   document.getElementById("root")