fix: added req headers in payment api (#246)

* fix: added req headers * fix: footer links * fix: pay button * fix: pay button
dscnitrourkela · Nov 5, 2024 · 76969fc · 76969fc
1 parent c62b073
commit 76969fc
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 8 deletions.
diff --git a/src/app/payment/payButton.jsx b/src/app/payment/payButton.jsx
@@ -1,15 +1,18 @@
 'use client';
+
+import crypto from 'crypto';
 import { useState } from 'react';
 import { SecondaryButton } from '@/components/shared/Typography/Buttons';
+import { PayButtonWrap } from './payment.styles';
 
 const PayButton = () => {
   const handlePayment = async () => {
     const response = await fetch('/api/phonepePayment', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        amount: 100,
-        orderId: 'unique_order_id_12345',
+        amount: 200,
+        orderId: Date.now().toString(),
         callbackUrl: `${window.location.origin}`,
       }),
     });
@@ -20,10 +23,34 @@ const PayButton = () => {
       window.location.href = data.paymentUrl;
     } else {
       alert('Payment failed. Please try again.');
+      console.log(data);
     }
   };
 
-  return <button onClick={handlePayment}>Pay with PhonePe</button>;
+  // const payload = {
+  //   merchantId: process.env.NEXT_PUBLIC_PHONEPE_MERCHANT_ID,
+  //   amount: 200,
+  //   merchantTransactionId: '45fghrewvty786hjdf',
+  //   redirectUrl: 'http://localhost:3000',
+  //   redirectMode: 'REDIRECT',
+  //   callbackUrl: `http://localhost:3000`,
+  //   paymentInstrument: {
+  //     type: 'PAY_PAGE',
+  //   },
+  // };
+
+  // const payloadString = JSON.stringify(payload);
+  // const base64Payload = Buffer.from(payloadString).toString('base64');
+
+  // const checksum = crypto
+  //   .createHmac('sha256', process.env.NEXT_PUBLIC_PHONEPE_API_KEY)
+  //   .update(base64Payload + '/pg/v1/pay' + process.env.NEXT_PUBLIC_PHONEPE_API_KEY)
+  //   .digest('base64');
+
+  // const x_veri = `${checksum}###${process.env.NEXT_PUBLIC_PHONEPE_API_KEY_INDEX}`;
+  // console.log(x_veri);
+
+  return <PayButtonWrap onClick={handlePayment}>Pay with PhonePe</PayButtonWrap>;
 };
 
 export default PayButton;
diff --git a/src/app/payment/payment.styles.jsx b/src/app/payment/payment.styles.jsx
@@ -5,3 +5,7 @@ export const PayContainer = styled.div`
   background-image: url('https://res.cloudinary.com/dhv234qct/image/upload/v1728888341/Inno2k24/yupqoznoucyhxwchhbv7.png');
   ${tw`w-full flex flex-col items-center justify-center bg-cover pt-36 `}
 `;
+
+export const PayButtonWrap = styled.div`
+  ${tw`w-full bg-teal-600 px-4 py-3 rounded mx-3 hover:cursor-pointer hover:bg-teal-700 my-5 flex flex-col items-center justify-center`}
+`;
diff --git a/src/components/Marginals/Footer/Footer.jsx b/src/components/Marginals/Footer/Footer.jsx
@@ -87,7 +87,7 @@ export const Footer = () => {
                 <SocialList>
                   {socials.map((item) => (
                     <li key={item.id}>
-                      <Link href={item.url}>
+                      <Link href={item.url} target='_blank'>
                         <SocialImageContainer>
                           <Image
                             src={item.img}

diff --git a/src/config/content/Footer.js b/src/config/content/Footer.js
@@ -4,7 +4,7 @@ export const socials = [
   {
     id: 'instagram',
     img: 'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1728758002/ic_baseline-discord_hdmbcy.svg',
-    url: 'https://www.instagram.com/inno.nitr_official?igsh=dWZ2cHlwM3N1ZHl2',
+    url: 'https://www.instagram.com/inno.nitr_official',
   },
   {
     id: 'whatsapp',

diff --git a/src/pages/api/phonepePayment.js b/src/pages/api/phonepePayment.js
@@ -6,10 +6,14 @@ export default async function handler(req, res) {
 
     const payload = {
       merchantId: process.env.NEXT_PUBLIC_PHONEPE_MERCHANT_ID,
-      transactionId: orderId,
       amount: amount,
       merchantTransactionId: orderId,
       redirectUrl: callbackUrl,
+      redirectMode: 'REDIRECT',
+      callbackUrl: callbackUrl,
+      paymentInstrument: {
+        type: 'PAY_PAGE',
+      },
     };
 
     const payloadString = JSON.stringify(payload);
@@ -33,8 +37,8 @@ export default async function handler(req, res) {
       const data = await response.json();
       res.status(200).json(data);
     } catch (error) {
-      console.error(error);
-      res.status(500).json({ error: 'Payment initiation failed' });
+      console.error('Payment initiation failed:', error);
+      res.status(500).json({ error });
     }
   } else {
     res.status(405).json({ error: 'Method not allowed' });