Merge pull request #5 from tktchurch/feature/razorpay-payment-gateway

Secure and Dynamic Razorpay Button ID Fetching
tktchurch · Jul 3, 2023 · 0f255dc · 0f255dc
2 parents 499bb6f + 2360d76
commit 0f255dc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 17 deletions.
diff --git a/app/(components)/RazorpayButton.tsx b/app/(components)/RazorpayButton.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+export default function RazorpayButton() {
+  const [mounted, setMounted] = useState(false);
+  const [buttonId, setButtonId] = useState(null);
+
+  useEffect(() => setMounted(true), []);
+
+  useEffect(() => {
+    fetch("/api/getButtonId")
+      .then((res) => res.json())
+      .then((data) => setButtonId(data.buttonId));
+  }, []);
+
+  useEffect(() => {
+    if (buttonId) {
+      const scriptElement = document.createElement("script");
+      const formElement = document.getElementById("donateForm");
+
+      scriptElement.setAttribute(
+        "src",
+        "https://checkout.razorpay.com/v1/payment-button.js"
+      );
+
+      scriptElement.setAttribute("data-payment_button_id", buttonId);
+
+      if (formElement) {
+        formElement.appendChild(scriptElement);
+      }
+    }
+  }, [mounted, buttonId]);
+
+  return mounted ? <form id="donateForm"></form> : null;
+}
diff --git a/app/giving/page.tsx b/app/giving/page.tsx
@@ -5,6 +5,7 @@ import { makeRazorpayPayment, makeStripePayment } from "../../pages/api/hello";
 import { getCheckoutSession } from "./getCheckoutSession";
 import { Stripe } from "stripe";
 import getStripe from "./getStripe";
+import RazorpayButton from "../(components)/RazorpayButton";
 
 function Giving() {
   const [currentInputFieldValue, setCurrentInputFieldValue] =
@@ -124,6 +125,8 @@ function Giving() {
     setIsDonateBtnLoading(false);
   };
 
+
+
   return (
     <div>
       <div
@@ -209,23 +212,9 @@ function Giving() {
           Domestic (India)
         </h2>
 
-        <button
-          onClick={initiateRazorpayPayment}
-          style={{ margin: "10px" }}
-          className="hover:scale-105 transform transition-all duration-300 ease-in-out"
-        >
-          <Image
-            // fill
-            style={{
-              border: "1px solid blue",
-              borderRadius: "5px",
-            }}
-            src="/assets/images/razorpay_btn.png"
-            alt=""
-            width={150}
-            height={100}
-          />
-        </button>
+
+        <RazorpayButton/>
+
 
         <div className=" w-full">
           <h2 className=" text-[40px] w-full lg:px-44 text-center font-semibold mt-20">

diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,7 @@ module.exports = {
   experimental: {
     appDir: true,
   },
+  //output: 'export',
   env: {
     PUBLIC_STRIPE_PUBLISHABLE_KEY:
       "pk_live_51HV9asF0AeV1mX6jPtlCWphIEG9T2ckbUEyuZZ0DjY4GZ0eXXOpScWmXqptKXcylaBRPZKELBQCJ2fDLWOZlZyrH00T1IujvgI",
@@ -13,3 +14,5 @@ module.exports = {
       "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiIxNzkxIiwidXNlck5hbWUiOm51bGwsInBob25lTnVtYmVyIjoiOTMyODUxNzQ2MSIsImNvdW50cnlDb2RlIjpudWxsLCJlbWFpbCI6bnVsbCwiZE9CIjpudWxsLCJnZW5kZXIiOm51bGwsImZpcnN0TmFtZSI6InplZWwxMiIsImxhc3ROYW1lIjoicHJhamFwYXRpIiwibWlkZGxlTmFtZSI6bnVsbCwicGFzc3dvcmQiOiIiLCJtYXJpdHVhbFN0YXR1cyI6bnVsbCwibWVtYmVyc2hpcElkIjpudWxsLCJyb2xlcyI6InVzZXIiLCJpc0FjdGl2ZSI6bnVsbCwicHJvZmlsZVVybCI6IiIsImlhdCI6MTY4NzU4NDQ5M30.9KM2QVl--ZqnVRVT-dNTba54JW5lI73Mr9SvWFhXfEU",
   },
 };
+
+
diff --git a/pages/api/getButtonId.ts b/pages/api/getButtonId.ts
@@ -0,0 +1,8 @@
+// pages/api/getButtonId.ts
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+    res.status(200).json({ buttonId: "pl_FUBGDtdtS1okY1" });
+  }
+