➕ ADD: Razorpay Snippet

manuarora700 · Mar 25, 2021 · a2bcf17 · a2bcf17 · vercel · Mar 25, 2021
1 parent 49ec62d
commit a2bcf17
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 0 deletions.
diff --git a/data/snippets/razorpay.mdx b/data/snippets/razorpay.mdx
@@ -0,0 +1,149 @@
+---
+title: "Razorpay"
+description: "Accept payments."
+logo: "razorpay.png"
+---
+
+## Code
+
+```js:index.js
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+
+export default function Home() {
+  async function displayRazorpay() {
+    const res = await loadRazorpay();
+
+    if (!res) {
+      alert("Razorpay SDK Failed to load");
+      return;
+    }
+
+    // Make API call to the serverless API
+    const data = await fetch("/api/razorpay", { method: "POST" }).then((t) =>
+      t.json()
+    );
+    console.log(data);
+    var options = {
+      key: process.env.RAZORPAY_KEY, // Enter the Key ID generated from the Dashboard
+      name: "Manu Arora Pvt Ltd",
+      currency: data.currency,
+      amount: data.amount,
+      order_id: data.id,
+      description: "Thankyou for your test donation",
+      image: "https://manuarora.in/logo.png",
+      handler: function (response) {
+        alert(response.razorpay_payment_id);
+        alert(response.razorpay_order_id);
+        alert(response.razorpay_signature);
+      },
+      prefill: {
+        name: "Manu Arora",
+        email: "[email protected]",
+        contact: "9999999999",
+      },
+    };
+
+    const paymentObject = new window.Razorpay(options);
+    paymentObject.open();
+  }
+  const loadRazorpay = () => {
+    return new Promise((resolve) => {
+      const script = document.createElement("script");
+      script.src = "https://checkout.razorpay.com/v1/checkout.js";
+      // document.body.appendChild(script);
+
+      script.onload = () => {
+        resolve(true);
+      };
+      script.onerror = () => {
+        resolve(false);
+      };
+
+      document.body.appendChild(script);
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to{" "}
+          <a href="https://github.com/manuarora700">
+            Razorpay Payments with Next.js
+          </a>
+        </h1>
+
+        <div className={styles.makePayment}>
+          <a onClick={displayRazorpay}>
+            <h3>Make Payment &rarr;</h3>
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+```
+
+```js:/api/razorpay.js
+const Razorpay = require("razorpay");
+const shortid = require("shortid");
+
+export default async function handler(req, res) {
+  if (req.method === "POST") {
+    // Initialize razorpay object
+    const razorpay = new Razorpay({
+      key_id: process.env.RAZORPAY_KEY,
+      key_secret: process.env.RAZORPAY_SECRET,
+    });
+
+    // Create an order -> generate the OrderID -> Send it to the Front-end
+    // Also, check the amount and currency on the backend (Security measure)
+
+    const payment_capture = 1;
+    const amount = 499;
+    const currency = "INR";
+    const options = {
+      amount: (amount * 100).toString(),
+      currency,
+      receipt: shortid.generate(),
+      payment_capture,
+    };
+
+    try {
+      const response = await razorpay.orders.create(options);
+
+      res.status(200).json({
+        id: response.id,
+        currency: response.currency,
+        amount: response.amount,
+      });
+    } catch (err) {
+      console.log(err);
+      res.status(400).json(err);
+    }
+  } else {
+    // Handle any other HTTP method
+  }
+}
+
+```
+
+## Usage
+
+<Step number={1} title="Create an Account on Razorpay" />
+
+- Head over to [Razorpay](https://razorpay.com) and create an account
+  <Image src="/static/images/razorpay/1.png" width={1200} height={700} />
+- Generate the [API keys](https://https://dashboard.razorpay.com/app/keys) which can be found in the `Test Mode` dashboard
+  <Image src="/static/images/razorpay/2.png" width={1200} height={700} />
+- Store the API keys in environment variables, example environment file is provided in the source code.
+- We use serverless functions (api routes in Next.js) which acts as our backend to create `order_id`.
+
+  [Source Code](https://github.com/manuarora700/razorpay-payments/tree/master/)
diff --git a/public/logos/razorpay.png b/public/logos/razorpay.png
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -36,6 +36,10 @@
     <loc>https://manuarora.in/snippets/moving-card</loc>
   </url>
 
+  <url>
+    <loc>https://manuarora.in/snippets/razorpay</loc>
+  </url>
+
   <url>
     <loc>https://manuarora.in/snippets/sendgrid</loc>
   </url>

diff --git a/public/static/images/razorpay/1.png b/public/static/images/razorpay/1.png
diff --git a/public/static/images/razorpay/2.png b/public/static/images/razorpay/2.png