Updating stripe integration and updating our favicon and title

karthickr95 · Jul 27, 2020 · 9dce248 · 9dce248
1 parent 28cc81a
commit 9dce248
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "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
@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap" rel="stylesheet">
-    <title>React App</title>
+    <title>E-Commerce Poc</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/cart/cart-item.tsx b/src/components/cart/cart-item.tsx
@@ -16,7 +16,7 @@ const CartItem = (props: CartItemProps) => {
             <img src={imageUrl} alt='item' />
             <div className='item-details'>
                 <span className='name'>{name}</span>
-                <span className='price'>{quantity} x ${price}</span>
+                <span className='price'>{quantity} x &#x20B9;{price}</span>
             </div>
         </div>
     )

diff --git a/src/components/stripe-checkout-button/stripe-checkout-button.tsx b/src/components/stripe-checkout-button/stripe-checkout-button.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import StripeCheckout, { Token } from 'react-stripe-checkout'
+
+type StripeCheckoutButtonProps = {
+    price: number
+}
+
+const StripeCheckoutButton = ({ price }: StripeCheckoutButtonProps) => {
+
+    const priceForStripe = price * 100
+    const publishableKey = 'pk_test_51H9TzAIBCK5SdsgKA9KjlcoAlZ0brByReiPX4fuVmhe4lr2CMzfV4KbFFdLC48GStZtg9y28SS5GOnKsWZ8HBrTf00MCc54e0O'
+
+    const onToken = (token: Token) => {
+        console.log(token)
+        alert('Payment Successful')
+    }
+
+    return (
+        <StripeCheckout
+            label='Pay Now'
+            name='E-Commerce POC'
+            billingAddress
+            shippingAddress
+            image='https://svgshare.com/i/CUz.svg'
+            currency='INR'
+            description={`Your total is &#x20B9; ${price}`}
+            amount={priceForStripe}
+            panelLabel='Pay Now'
+            token={onToken}
+            stripeKey={publishableKey}
+        />
+    )
+}
+
+export default StripeCheckoutButton
diff --git a/src/pages/checkout-page/checkout-page.styles.scss b/src/pages/checkout-page/checkout-page.styles.scss
@@ -28,4 +28,16 @@
     margin-left: auto;
     font-size: 36px;
   }
+
+  button {
+    margin-left: auto;
+    margin-top: 50px;
+  }
+
+  .test-warning {
+    text-align: center;
+    margin-top: 40px;
+    font-size: 24px;
+    color: red;
+  }
 }
diff --git a/src/pages/checkout-page/checkout-page.tsx b/src/pages/checkout-page/checkout-page.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux'
 import { selectCartItems, selectCartTotalPrice } from '../../redux/cart-selector'
 
 import CheckoutItem from '../../components/checkout-item/checkout-item'
+import StripeCheckoutButton from '../../components/stripe-checkout-button/stripe-checkout-button'
 
 const CheckoutPage = () => {
 
@@ -34,9 +35,13 @@ const CheckoutPage = () => {
                     <CheckoutItem key={item.product.id} item={item} />
                 )
             }
-            <div className='total'>
-                <span>TOTAL: ${cartTotalPrice}</span>
+            <div className='total'>TOTAL: &#x20B9;{cartTotalPrice}</div>
+            <div className='test-warning'>
+                *Please use the following test credit card for payments*
+                <br/>
+                4242 4242 4242 4242 - Exp: 01/21 - CVV: 123
             </div>
+            <StripeCheckoutButton price={cartTotalPrice} />
         </div>
     )
 }