diff --git a/package-lock.json b/package-lock.json index 6d16e52..7f6e8fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11661,6 +11661,11 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-stripe-checkout": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/react-stripe-checkout/-/react-stripe-checkout-2.6.3.tgz", + "integrity": "sha1-MXOocLBOWjwyGgbSTNU8YDARHEU=" + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 2dc5e86..e3d2e9b 100644 --- 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 index bcd5dfd..6c41b3b 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 7ae2299..618494d 100644 --- 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`. --> - React App + E-Commerce Poc diff --git a/src/components/cart/cart-item.tsx b/src/components/cart/cart-item.tsx index 56f884f..0170854 100644 --- a/src/components/cart/cart-item.tsx +++ b/src/components/cart/cart-item.tsx @@ -16,7 +16,7 @@ const CartItem = (props: CartItemProps) => { item
{name} - {quantity} x ${price} + {quantity} x ₹{price}
) diff --git a/src/components/stripe-checkout-button/stripe-checkout-button.tsx b/src/components/stripe-checkout-button/stripe-checkout-button.tsx new file mode 100644 index 0000000..a8ae2b6 --- /dev/null +++ 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 ( + + ) +} + +export default StripeCheckoutButton \ No newline at end of file diff --git a/src/pages/checkout-page/checkout-page.styles.scss b/src/pages/checkout-page/checkout-page.styles.scss index 9abbdd7..9cc6148 100644 --- 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 index 23be93d..e087b0f 100644 --- 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 = () => { ) } -
- TOTAL: ${cartTotalPrice} +
TOTAL: ₹{cartTotalPrice}
+
+ *Please use the following test credit card for payments* +
+ 4242 4242 4242 4242 - Exp: 01/21 - CVV: 123
+
) }