Stripe Integration and updated favicon

AdityaKumawat97 · Oct 16, 2020 · 9e2337c · 9e2337c
1 parent e0f27bb
commit 9e2337c
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 8,748 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "2.1.8",
+    "react-stripe-checkout": "^2.6.3",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <!--
+
+<head>
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -23,12 +21,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>ECOM-AK</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,5 +37,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/Pages/checkout/checkout.component.jsx b/src/Pages/checkout/checkout.component.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import CheckoutItem from '../../components/checkout-item/checkout-item.component'
-
+import StripeButton from '../../components/stripe-button/stripe-button.component'
 import { selectCartItems, selectCartTotal } from '../../redux/cart/cart.selectors'
 
 import './checkout.styles.scss'
@@ -36,6 +36,11 @@ function CheckoutPage({ cartItems, total }) {
             <div className="total">
                 <span>Total= ${total}</span>
             </div>
+            <div className="test-warning">
+                Please use any data for address and name and email, also use <br />
+                card number: 4242 4242 4242 4242, expiry: 02/22, cvv: 123 for dummy payment
+            </div>
+            <StripeButton price={total} />
         </div>
     )
 }

diff --git a/src/Pages/checkout/checkout.styles.scss b/src/Pages/checkout/checkout.styles.scss
@@ -28,4 +28,12 @@
         margin-left: auto;
         font-size: 36px;
     }
+    button {
+        margin-left: auto;
+        margin-top: 50px;
+    }
+    .test-warning {
+        margin-top: 20px;
+        color: red;
+    }
 }
diff --git a/src/components/collection-item/collection-item.styles.scss b/src/components/collection-item/collection-item.styles.scss
@@ -18,11 +18,12 @@
   }
 
   .image {
-    width: 100%;
+    width: 22vw;
     height: 95%;
     background-size: cover;
     background-position: center;
     margin-bottom: 5px;
+    overflow: hidden;
   }
   .custom-button {
     width: 80%;

diff --git a/src/components/stripe-button/stripe-button.component.jsx b/src/components/stripe-button/stripe-button.component.jsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import StripeCheckout from 'react-stripe-checkout'
+
+export default function StripeButton({ price }) {
+    const priceForStripe = price * 100
+    const publishableKey = 'pk_test_51Hcr59If3Hn5BLfLNdteyaTLDzz6Sf4g9CMEK21WZm7BHjEXbVLl2uqXNK4b9Gex3GBZrZTiP2aqV5QkncN7uasa001eoP4pJr'
+
+    const onToken = token => {
+        console.log(token)
+        alert("dummy payment successfull")
+    }
+    return (
+        <StripeCheckout
+            label="Pay Now"
+            name='AK Clothing Ltd.'
+            billingAddress
+            shippingAddress
+            image='https://svgshare.com/i/QaG.svg'
+            description={`Your total is ${price}`}
+            amount={priceForStripe}
+            panelLabel="Pay Now"
+            token={onToken}
+            stripeKey={publishableKey}
+        />
+    )
+}