Merge pull request #24 from Chamindu36/js-implementation

[T21] Add stripe and Netlify functions to add a payment capability

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -21,3 +22,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Local Netlify folder
+.netlify

netlify/functions/create-payment-intent.js

@@ -0,0 +1,26 @@
+require("dotenv").config();
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+exports.handler = async (event) => {
+    try {
+        const { amount } = JSON.parse(event.body);
+
+        const paymentIntent = await stripe.paymentIntents.create({
+            amount,
+            currency: "usd",
+            payment_method_types: ["card"],
+        });
+
+        return {
+            statusCode: 200,
+            body: JSON.stringify({ paymentIntent }),
+        };
+    } catch (error) {
+        console.log({ error });
+
+        return {
+            statusCode: 400,
+            body: JSON.stringify({ error }),
+        };
+    }
+};

package.json

@@ -1,12 +1,15 @@
 {
   "name": "market-place-pet-project",
   "version": "0.1.0",
-  "homepage": "https://Chamindu36.github.io/market-place-pet-project",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.5",
+    "@stripe/react-stripe-js": "^2.1.2",
+    "@stripe/stripe-js": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "dotenv": "^16.3.1",
     "firebase": "^10.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -21,6 +24,7 @@
     "redux-thunk": "^2.4.2",
     "reselect": "^4.1.8",
     "sass": "^1.63.6",
+    "stripe": "^12.17.0",
     "styled-components": "^6.0.4",
     "web-vitals": "^2.1.4"
   },

src/components/button/button.component.jsx

@@ -1,4 +1,4 @@
-import { BaseButton, GoogleSignInButton, InvertedButton } from './button.styles.jsx';
+import { BaseButton, GoogleSignInButton, InvertedButton, ButtonSpinner } from './button.styles.jsx';
 
 export const BUTTON_TYPE_CLASSES = {
     base: "base",
@@ -17,13 +17,11 @@ const getButton = (buttonType = BUTTON_TYPE_CLASSES.base) => {
 };
 
 
-const Button = ({ children, buttonType, ...otherProps }) => {
+const Button = ({ children, buttonType, isLoading, ...otherProps }) => {
     const CustomButton = getButton(buttonType);
     return (
-        <CustomButton
-            {...otherProps}
-        >
-            {children}
+        <CustomButton disabled={isLoading}{...otherProps}>
+            {isLoading ? <ButtonSpinner /> : children}
         </CustomButton>
     );
 };

src/components/button/button.styles.jsx

@@ -17,6 +17,7 @@ export const BaseButton = styled.button`
   cursor: pointer;
   display: flex;
   justify-content: center;
+  align-items: center
 
   &:hover {
     background-color: white;
@@ -46,3 +47,25 @@ export const InvertedButton = styled(BaseButton)`
       border: none;
     }
 `;
+
+export const ButtonSpinner = styled.div`
+  align-items: center
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  border: 3px solid rgba(195, 195, 195, 0.6);
+  border-radius: 50%;
+  border-top-color: #636767;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+  @keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+`;