Add apis'

Author: imranhsayed

.env-example

@@ -4,5 +4,12 @@ NEXT_PUBLIC_WORDPRESS_SITE_URL=https://example.com
 #Frontend Next.js Site URL
 NEXT_PUBLIC_SITE_URL=http://localhost:3000
 
+#Stripe env variables.
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
+STRIPE_SECRET_KEY=sk_test_xxx
+
+STRIPE_WEBHOOK_ENDPOINT_SECRET=whsec_xxxx
+
+## WooCommerce Consumer Key and secret.
 WC_CONSUMER_KEY=ck_xx
 WC_CONSUMER_SECRET=cs_xx

package-lock.json

@@ -9,17 +9,21 @@
     "svg": "svgr -d src/components/icons src/components/icons/svgs"
   },
   "dependencies": {
+    "@stripe/stripe-js": "^1.36.0",
     "@svgr/cli": "^5.5.0",
     "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "axios": "^0.21.1",
     "classnames": "^2.3.1",
     "dompurify": "^2.3.1",
     "lodash": "^4.17.21",
+    "micro": "^9.4.1",
     "next": "11.1.0",
+    "next-stripe": "^1.0.0-beta.9",
     "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sass": "^1.38.0",
+    "stripe": "^10.8.0",
     "validator": "^13.7.0"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,63 @@
+const WooCommerceRestApi = require( '@woocommerce/woocommerce-rest-api' ).default;
+import { isEmpty } from 'lodash';
+
+const api = new WooCommerceRestApi( {
+	url: process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL,
+	consumerKey: process.env.WC_CONSUMER_KEY,
+	consumerSecret: process.env.WC_CONSUMER_SECRET,
+	version: "wc/v3"
+} );
+
+/**
+ * Create order endpoint.
+ *
+ * @see http://woocommerce.github.io/woocommerce-rest-api-docs/?javascript#create-an-order
+ *
+ * @param {Object} req Request.
+ * @param {Object} res Response.
+ *
+ * @return {Promise<{orderId: string, success: boolean, error: string}>}
+ */
+export default async function handler( req, res ) {
+	
+	const responseData = {
+		success: false,
+		orderId: '',
+		total: '',
+		currency: '',
+		error: '',
+	};
+	
+	if ( isEmpty( req.body ) ) {
+		responseData.error = 'Required data not sent';
+		return responseData;
+	}
+	
+	const data = req.body;
+	data.status = 'pending';
+	data.set_paid = false;
+	
+	try {
+		const { data } = await api.post(
+			'orders',
+			req.body,
+		);
+		
+		responseData.success = true;
+		responseData.orderId = data.number;
+		responseData.total = data.total;
+		responseData.currency = data.currency;
+		
+		res.json( responseData );
+		
+	} catch ( error ) {
+		console.log( 'error', error );
+		/**
+		 * Request usually fails if the data in req.body is not sent in the format required.
+		 *
+		 * @see Data shape expected: https://stackoverflow.com/questions/49349396/create-an-order-with-coupon-lines-in-woocomerce-rest-api
+		 */
+		responseData.error = error.message;
+		res.status( 500 ).json( responseData );
+	}
+}

pages/api/create-order.js

@@ -0,0 +1,10 @@
+const stripe = require( 'stripe' )( process.env.STRIPE_SECRET_KEY );
+
+module.exports = async ( req, res ) => {
+	
+	const { session_id } = req.query;
+	
+	const session = await stripe.checkout.sessions.retrieve( session_id );
+	
+	res.status( 200 ).json( session );
+};

pages/api/get-stripe-session.js

@@ -0,0 +1,89 @@
+import { buffer } from "micro";
+const Stripe = require('stripe');
+const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
+
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
+    apiVersion: '2020-08-27'
+});
+const webhookSecret = process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET;
+
+export const config = {
+    api: {
+        bodyParser: false,
+    },
+};
+
+const api = new WooCommerceRestApi({
+	url: process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL,
+	consumerKey: process.env.WC_CONSUMER_KEY,
+	consumerSecret: process.env.WC_CONSUMER_SECRET,
+	version: "wc/v3"
+});
+
+/**
+ * Update Order.
+ *
+ * Once payment is successful or failed,
+ * Update Order Status to 'Processing' or 'Failed' and set the transaction id.
+ *
+ * @param {String} newStatus Order Status to be updated.
+ * @param {String} orderId Order id
+ * @param {String} transactionId Transaction id.
+ *
+ * @returns {Promise<void>}
+ */
+const updateOrder = async ( newStatus, orderId, transactionId = '' ) => {
+
+    let newOrderData = {
+        status: newStatus
+    }
+
+    if ( transactionId ) {
+        newOrderData.transaction_id = transactionId
+    }
+
+    try {
+        const {data} = await api.put( `orders/${ orderId }`, newOrderData );
+        console.log( '✅ Order updated data', data );
+    } catch (ex) {
+        console.error('Order creation error', ex);
+        throw ex;
+    }
+}
+
+const handler = async (req, res) => {
+    if (req.method === "POST") {
+        const buf = await buffer(req);
+        const sig = req.headers["stripe-signature"];
+
+        let stripeEvent;
+
+        try {
+            stripeEvent = stripe.webhooks.constructEvent(buf, sig, webhookSecret);
+            console.log( 'stripeEvent', stripeEvent );
+        } catch (err) {
+            res.status(400).send(`Webhook Error: ${err.message}`);
+            return;
+        }
+
+        if ( 'checkout.session.completed' === stripeEvent.type ) {
+            const session = stripeEvent.data.object;
+            console.log( 'sessionsession', session );
+            console.log( '✅ session.metadata.orderId', session.metadata.orderId, session.id );
+            // Payment Success.
+            try {
+                await updateOrder( 'processing', session.metadata.orderId, session.id );
+            } catch (error) {
+                await updateOrder( 'failed', session.metadata.orderId );
+                console.error('Update order error', error);
+            }
+        }
+
+        res.json({ received: true });
+    } else {
+        res.setHeader("Allow", "POST");
+        res.status(405).end("Method Not Allowed");
+    }
+};
+
+export default handler;

pages/api/stripe-web-hook.js

@@ -0,0 +1,5 @@
+import NextStripe from 'next-stripe'
+
+export default NextStripe({
+    stripe_key: process.env.STRIPE_SECRET_KEY
+})