stripe

functions/index.js

@@ -1,12 +1,25 @@
 const functions = require("firebase-functions");
 const express = require("express");
 const cors = require("cors");
+const stripe = require("stripe")("sk_test_51IMz9rAOjDUcurOe877R30PocKUFHvT8HUhZievEdnBg4BkBca82ZkfrVMlQ1qrJlLWr0mcLWx4r8LwbCfcBd6Yk00ccmkDUgQ")
 
 const app = express();
 
 app.use(cors({origin: true}));
 app.use(express.json());
 
+app.post('/payment/create', async (req, res) => {
+  try {
+    const {amount, shipping} = req.body;
+    const paymentIntent = await stripe.paymentIntents.create({
+      shipping, amount, currency: "usd"
+    });
+    res.status(200).send(paymentIntent.client_secret)
+  } catch (error) {
+    res.status(500).json({statusCode: 500, message: error.message})
+  }
+})
+
 app.get("*", (req, res) => {
   res.status(404).send("404, Not Found.");
 });

functions/package.json

@@ -10,19 +10,20 @@
     "logs": "firebase functions:log"
   },
   "engines": {
-    "node": "12"
+    "node": "14"
   },
   "main": "index.js",
   "dependencies": {
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "firebase-admin": "^9.2.0",
-    "firebase-functions": "^3.11.0"
+    "firebase-functions": "^3.11.0",
+    "stripe": "^8.137.0"
   },
   "devDependencies": {
     "eslint": "^7.6.0",
     "eslint-config-google": "^0.14.0",
     "firebase-functions-test": "^0.2.0"
   },
   "private": true
-}
+}

package.json

@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@stripe/react-stripe-js": "^1.2.2",
+    "@stripe/stripe-js": "^1.12.1",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
+    "axios": "^0.21.1",
     "ckeditor4-react": "^1.4.0",
     "firebase": "^8.2.6",
     "node-sass": "^5.0.0",
     "react": "^17.0.1",
+    "react-country-region-selector": "^3.0.2",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",

src/App.js

@@ -24,6 +24,7 @@ import Admin from "./pages/Admin";
 import Search from "./pages/Search";
 import ProductDetails from "./pages/ProductDetails";
 import Cart from "./pages/Cart";
+import Payment from './pages/Payment'
 
 const App = () => {
   const dispatch = useDispatch();
@@ -79,6 +80,17 @@ const App = () => {
             </MainLayout>
           )}
         />
+        <Route
+          exact
+          path="/payment"
+          render={() => (
+            <WithAuth >
+            <MainLayout>
+              <Payment />
+            </MainLayout>
+          </WithAuth>
+          )}
+        />
         <Route
           path="/registration"
           render={() => (

src/components/Checkout/index.js

@@ -83,7 +83,7 @@ const Checkout = () => {
                             </Button>
                           </td>
                           <td>
-                            <Button>Checkout</Button>
+                            <Button onClick={() => history.push('/payment')} >Checkout</Button>
                           </td>
                         </tr>
                       </tbody>