diff --git a/package-lock.json b/package-lock.json
index 5aa7dd2..1c7b719 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
"dependencies": {
"@prisma/client": "^4.12.0",
"@reduxjs/toolkit": "^1.9.3",
+ "@stripe/stripe-js": "^1.52.1",
+ "axios": "^1.3.5",
"eslint": "8.37.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
@@ -18,7 +20,8 @@
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-redux": "^8.0.5",
- "redux-persist": "^6.0.0"
+ "redux-persist": "^6.0.0",
+ "stripe": "^12.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
@@ -437,6 +440,11 @@
"resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz",
"integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg=="
},
+ "node_modules/@stripe/stripe-js": {
+ "version": "1.52.1",
+ "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.52.1.tgz",
+ "integrity": "sha512-fza40OPSpGQlFxc5TZWiYC/6Lk89Sep1fLuv9ss33YS6lCAF8UZbfA1E6W+lwO4c7WRKZIZumHIEbPJfP/O9uw=="
+ },
"node_modules/@swc/helpers": {
"version": "0.4.14",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz",
@@ -459,6 +467,11 @@
"resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
},
+ "node_modules/@types/node": {
+ "version": "18.15.11",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
+ "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q=="
+ },
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -763,6 +776,11 @@
"resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
"integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+ },
"node_modules/autoprefixer": {
"version": "10.4.14",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
@@ -815,6 +833,16 @@
"node": ">=4"
}
},
+ "node_modules/axios": {
+ "version": "1.3.5",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.5.tgz",
+ "integrity": "sha512-glL/PvG/E+xCWwV8S6nCHcrfg1exGx7vxyUIivIA1iL7BIh6bePylCfVHwp6k13ao7SATxB6imau2kqY+I67kw==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
"node_modules/axobject-query": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -1008,6 +1036,17 @@
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
},
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/commander": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1128,6 +1167,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/didyoumean": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1831,6 +1878,25 @@
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
"integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
},
+ "node_modules/follow-redirects": {
+ "version": "1.15.2",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+ "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
"node_modules/for-each": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1839,6 +1905,19 @@
"is-callable": "^1.1.3"
}
},
+ "node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -2678,6 +2757,25 @@
"node": ">=8.6"
}
},
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3241,6 +3339,11 @@
"react-is": "^16.13.1"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"node_modules/punycode": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3249,6 +3352,20 @@
"node": ">=6"
}
},
+ "node_modules/qs": {
+ "version": "6.11.1",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
+ "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
+ "dependencies": {
+ "side-channel": "^1.0.4"
+ },
+ "engines": {
+ "node": ">=0.6"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/ljharb"
+ }
+ },
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3683,6 +3800,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/stripe": {
+ "version": "12.0.0",
+ "resolved": "https://registry.npmjs.org/stripe/-/stripe-12.0.0.tgz",
+ "integrity": "sha512-9zdcWApF4Yg2WG4GVv1qnvAv+h5KD103gKwbTsTyk5G3lf9h4vN0FXGQ5d5eWKP9itAjt0D5gZtWG7cLPzyLxw==",
+ "dependencies": {
+ "@types/node": ">=8.1.0",
+ "qs": "^6.11.0"
+ },
+ "engines": {
+ "node": ">=12.*"
+ }
+ },
"node_modules/styled-jsx": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
diff --git a/package.json b/package.json
index 7a4893e..db48b17 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
"dependencies": {
"@prisma/client": "^4.12.0",
"@reduxjs/toolkit": "^1.9.3",
+ "@stripe/stripe-js": "^1.52.1",
+ "axios": "^1.3.5",
"eslint": "8.37.0",
"eslint-config-next": "13.2.4",
"next": "13.2.4",
@@ -19,7 +21,8 @@
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"react-redux": "^8.0.5",
- "redux-persist": "^6.0.0"
+ "redux-persist": "^6.0.0",
+ "stripe": "^12.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.14",
diff --git a/pages/api/create-checkout-session.js b/pages/api/create-checkout-session.js
new file mode 100644
index 0000000..c724e6e
--- /dev/null
+++ b/pages/api/create-checkout-session.js
@@ -0,0 +1,42 @@
+const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
+
+async function CreateStripeSession(req, res) {
+ const { items } = req.body;
+
+ const redirectURL =
+ process.env.NODE_ENV === "development"
+ ? "http://localhost:3000"
+ : "http://localhost:3000";
+
+ const modifiedItems = items.map((item) => ({
+ price_data: {
+ currency: "usd",
+ unit_amount: item.price * 100,
+ product_data: {
+ name: item.title,
+ images: [item.imageUrl],
+ },
+ },
+ quantity: item.quantity,
+ }));
+
+ const session = await stripe.checkout.sessions?.create({
+ payment_method_types: ["card"],
+ shipping_address_collection: {
+ allowed_countries: [],
+ },
+ line_items: modifiedItems,
+ mode: "payment",
+ success_url: redirectURL + "?status=success",
+ cancel_url: redirectURL + "?status=cancel",
+ metadata: {
+ images: JSON.stringify(items.map((item) => item.imageUrl)),
+ },
+ });
+
+ return res.status(200).json({
+ id: session?.id,
+ });
+}
+
+export default CreateStripeSession;
diff --git a/pages/cart.js b/pages/cart.js
index 53b3d81..dce37d1 100644
--- a/pages/cart.js
+++ b/pages/cart.js
@@ -3,20 +3,49 @@ import { formatCurrency } from "@/utils/formatCurrency";
import { useDispatch, useSelector } from "react-redux";
import CartItem from "@/components/CartItem";
import { clearCart } from "@/store/productSlice";
+import { loadStripe } from "@stripe/stripe-js";
+import axios from "axios";
const CartPage = () => {
const products = useSelector((state) => state.myShop.products);
const dispatch = useDispatch();
+ /* STRIPE PROMISE */
+ const stripePromise = loadStripe(
+ process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
+ );
+
+ /* CHECKOUT HANDLER */
+ const handleCheckout = async () => {
+ const stripe = await stripePromise;
+
+ /* SENDING POST REQ. TO CREATE A CHECKOUT SESSION */
+ const checkoutSession = await axios.post("/api/create-checkout-session", {
+ items: products,
+ });
+
+ /* REDIRECTING */
+ if (checkoutSession) {
+ console.log(checkoutSession);
+ }
+
+ const result = await stripe?.redirectToCheckout({
+ sessionId: checkoutSession?.data?.id,
+ });
+
+ if (result?.error) alert(result?.error.message);
+
+ dispatch(clearCart());
+ };
+
+ /* SUBTOTAL CALCULATION */
const total = () => {
const calcTotal = products.reduce(
(acc, item) => (acc += item.quantity * item.price),
0
);
-
const fixedTotal = +calcTotal.toFixed(2);
const subtotal = formatCurrency(fixedTotal);
-
return subtotal;
};
@@ -80,13 +109,14 @@ const CartPage = () => {
Shipping cost will calculate at the checkout.
- dispatch(clearCart())}
- href="/checkout"
+
+ {/* CHECKOUT BUTTON */}
+
diff --git a/pages/checkout.js b/pages/checkout.js
deleted file mode 100644
index c7d6b05..0000000
--- a/pages/checkout.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const Checkout = () => {
- return (
-
-
- Experimental... Your cart has been cleared!
-
-
- );
-};
-
-export default Checkout;