Add payment process with stripe

KeenWarrior · KeenWarrior · commit bd6ff8d6dd5d · 2020-12-21T00:03:52.000+05:30
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,8 @@
     "@mui-treasury/components": "^1.9.1",
     "@mui-treasury/styles": "^1.13.0",
     "@react-pdf/renderer": "^1.6.8",
+    "@stripe/react-stripe-js": "^1.1.2",
+    "@stripe/stripe-js": "^1.11.0",
     "apexcharts": "^3.18.0",
     "axios": "^0.19.2",
     "axios-mock-adapter": "^1.17.0",
diff --git a/src/data/courses/advanced/CompetitiveJava.js b/src/data/courses/advanced/CompetitiveJava.js
@@ -16,6 +16,7 @@ export const competitiveJava = {
       link: '',
       priceCut: '₹ 12,000',
       price: '₹ 5,850',
+      priceId: 'price_1I0Uz4LVU3L7vcSrx3vOaUdv',
       active: false
     }
   ],
diff --git a/src/data/courses/advanced/MachineLearning.js b/src/data/courses/advanced/MachineLearning.js
@@ -16,6 +16,7 @@ export const machineLearning = {
       link: '',
       priceCut: '₹ 12,000',
       price: '₹ 5,850',
+      priceId: 'price_1I0UxdLVU3L7vcSrm95JI9Jr',
       active: false
     }
   ],
diff --git a/src/data/courses/advanced/WebDevelopment.js b/src/data/courses/advanced/WebDevelopment.js
@@ -17,6 +17,7 @@ export const webDevelopment = {
       link: '',
       priceCut: '₹ 12,000',
       price: '₹ 5,850',
+      priceId: 'price_1I0UyTLVU3L7vcSrBn1QACYX',
       active: false
     }
   ],
diff --git a/src/data/courses/foundation/AlgoJS.js b/src/data/courses/foundation/AlgoJS.js
@@ -16,6 +16,7 @@ export const algoJS = {
       link: '',
       priceCut: '₹ 10,000',
       price: '₹ 4,850',
+      priceId: 'price_1I0UveLVU3L7vcSrvRIaf1aL',
       active: false
     }
   ],
diff --git a/src/data/courses/foundation/AlgoJava.js b/src/data/courses/foundation/AlgoJava.js
@@ -16,6 +16,7 @@ export const algoJava = {
       link: '',
       priceCut: '₹ 10,000',
       price: '₹ 4,850',
+      priceId: 'price_1I0UwsLVU3L7vcSrLw793Cdb',
       active: false
     }
   ],
diff --git a/src/data/courses/foundation/AlgoPython.js b/src/data/courses/foundation/AlgoPython.js
@@ -16,6 +16,7 @@ export const algoPython = {
       link: '',
       priceCut: '₹ 10,000',
       price: '₹ 4,850',
+      priceId: 'price_1I0UwFLVU3L7vcSr9y77KiRe',
       active: false
     }
   ],
diff --git a/src/data/courses/training/CompetitiveJava.js b/src/data/courses/training/CompetitiveJava.js
@@ -16,6 +16,7 @@ export const competitiveJava = {
       link: '',
       priceCut: '₹ 20,000',
       price: '₹ 9,900',
+      priceId: 'price_1I0UuTLVU3L7vcSrh09rXyWG',
       active: false
     }
   ],
diff --git a/src/data/courses/training/MachineLearning.js b/src/data/courses/training/MachineLearning.js
@@ -16,6 +16,7 @@ export const machineLearning = {
       link: '',
       priceCut: '₹ 20,000',
       price: '₹ 9,900',
+      priceId: 'price_1I0UsjLVU3L7vcSr1UcHNNSd',
       active: true
     }
   ],
diff --git a/src/data/courses/training/WebDevelopment.js b/src/data/courses/training/WebDevelopment.js
@@ -17,6 +17,7 @@ export const webDevelopment = {
       link: '',
       priceCut: '₹ 20,000',
       price: '₹ 9,900',
+      priceId: 'price_1I0UteLVU3L7vcSra2HMJfy4',
       active: true
     }
   ],
diff --git a/src/views/pages/Course/ApplyModal.js b/src/views/pages/Course/ApplyModal.js
@@ -19,6 +19,7 @@ import {
 } from 'react-material-ui-form-validator';
 import { useSnackbar } from 'notistack';
 import axios from 'axios';
+import { loadStripe } from '@stripe/stripe-js';
 
 const useStyles = makeStyles(theme => ({
   btn: {
@@ -38,12 +39,16 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-export default function ApplyModal({ fullWidth = false, ...rest }) {
+export default function ApplyModal({ batch, fullWidth = false, ...rest }) {
   const classes = useStyles();
   const [open, setOpen] = useState(false);
   const [formData, updateFormData] = useState({});
   const [submitting, setSubmitting] = useState(0);
 
+  const stripePromise = loadStripe(
+    'pk_live_51HX0eRLVU3L7vcSr5wAyProaDDgdhpqK9im3z7SJJUUOOMJijT0g3CBKJh6sRJOz8Or7yRHt2mka54PSRDXrL3xG0050pPbNE8'
+  );
+
   const { enqueueSnackbar } = useSnackbar();
 
   const handleClickOpen = () => {
@@ -78,6 +83,23 @@ export default function ApplyModal({ fullWidth = false, ...rest }) {
         setSubmitting(0);
         handleClose();
         enqueueSnackbar('Application Submitted Successfully');
+        stripePromise.then(stripe => {
+          stripe.redirectToCheckout({
+            lineItems: [
+              // Replace with the ID of your price
+              { price: batch.priceId, quantity: 1 }
+            ],
+            mode: 'payment',
+            successUrl: 'https://codeforcause.org/success',
+            cancelUrl: 'https://codeforcause.org/canceled'
+          })
+          .then(function(result) {
+            // If `redirectToCheckout` fails due to a browser or network
+            // error, display the localized error message to your customer
+            // using `result.error.message`.
+          });
+        });
+          
       })
       .catch(error => {
         enqueueSnackbar('Application Failed. Try again later');
diff --git a/src/views/pages/Course/FinalAction.js b/src/views/pages/Course/FinalAction.js
@@ -229,6 +229,7 @@ export default function FinalAction({ course, batch }) {
           </Card>
           <Box style={{ width: '100%' }}>
             <ApplyModal
+              batch={batch}
               fullWidth={true}
               style={{
                 marginTop: '24px',
diff --git a/src/views/pages/Course/Schedule.js b/src/views/pages/Course/Schedule.js
@@ -278,7 +278,7 @@ function BatchDropBox({ course, batch, batchIndex, expanded, setExpanded }) {
               borderRadius: '5px'
             }}
           >
-            <ApplyModal />
+            <ApplyModal batch={batch}/>
           </Box>
         </Box>
       </Collapse>

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export const competitiveJava = {`
`16`	`16`	`link: '',`
`17`	`17`	`priceCut: '₹ 12,000',`
`18`	`18`	`price: '₹ 5,850',`
	`19`	`+ priceId: 'price_1I0Uz4LVU3L7vcSrx3vOaUdv',`
`19`	`20`	`active: false`
`20`	`21`	`}`
`21`	`22`	`],`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export const machineLearning = {`
`16`	`16`	`link: '',`
`17`	`17`	`priceCut: '₹ 12,000',`
`18`	`18`	`price: '₹ 5,850',`
	`19`	`+ priceId: 'price_1I0UxdLVU3L7vcSrm95JI9Jr',`
`19`	`20`	`active: false`
`20`	`21`	`}`
`21`	`22`	`],`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ export const webDevelopment = {`
`17`	`17`	`link: '',`
`18`	`18`	`priceCut: '₹ 12,000',`
`19`	`19`	`price: '₹ 5,850',`
	`20`	`+ priceId: 'price_1I0UyTLVU3L7vcSrBn1QACYX',`
`20`	`21`	`active: false`
`21`	`22`	`}`
`22`	`23`	`],`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export const algoJS = {`
`16`	`16`	`link: '',`
`17`	`17`	`priceCut: '₹ 10,000',`
`18`	`18`	`price: '₹ 4,850',`
	`19`	`+ priceId: 'price_1I0UveLVU3L7vcSrvRIaf1aL',`
`19`	`20`	`active: false`
`20`	`21`	`}`
`21`	`22`	`],`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export const algoJava = {`
`16`	`16`	`link: '',`
`17`	`17`	`priceCut: '₹ 10,000',`
`18`	`18`	`price: '₹ 4,850',`
	`19`	`+ priceId: 'price_1I0UwsLVU3L7vcSrLw793Cdb',`
`19`	`20`	`active: false`
`20`	`21`	`}`
`21`	`22`	`],`
Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ export const algoPython = {`
`16`	`16`	`link: '',`
`17`	`17`	`priceCut: '₹ 10,000',`
`18`	`18`	`price: '₹ 4,850',`
	`19`	`+ priceId: 'price_1I0UwFLVU3L7vcSr9y77KiRe',`
`19`	`20`	`active: false`
`20`	`21`	`}`
`21`	`22`	`],`