Added PhonePe as a payment gateway and fixed payment gateway selection

Author: macayu17

backend/.env.example

@@ -22,9 +22,10 @@ RAZORPAY_KEY_SECRET=your_razorpay_key_secret
 STRIPE_SECRET_KEY=your_stripe_secret_key
 STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
 
-# Payment Gateway - PhonePe (Sandbox)
-PHONEPE_MERCHANT_ID=PGTESTPAYUAT
-PHONEPE_SALT_KEY=099eb0cd-02cf-4e2a-8aca-3e6c6aff0399
+# Payment Gateway - PhonePe
+# Get these from PhonePe Developer Dashboard: https://developer.phonepe.com
+PHONEPE_CLIENT_ID=your_client_id
+PHONEPE_CLIENT_SECRET=your_client_secret
 PHONEPE_SALT_INDEX=1
 PHONEPE_ENV=sandbox
 

backend/src/services/payment.service.js

@@ -48,12 +48,12 @@ export function verifyRazorpaySignature(body, signature) {
 const PHONEPE_CONFIG = {
   sandbox: {
     baseUrl: 'https://api-preprod.phonepe.com/apis/pg-sandbox',
-    // Test credentials - use for sandbox testing
+    // Test phone/OTP for sandbox testing
     testPhone: '9999999999',
     testOtp: '123456'
   },
   production: {
-    baseUrl: 'https://api.phonepe.com/apis/hermes'
+    baseUrl: 'https://api.phonepe.com/apis/pg'
   }
 };
 
@@ -62,40 +62,45 @@ function getPhonePeBaseUrl() {
   return PHONEPE_CONFIG[env]?.baseUrl || PHONEPE_CONFIG.sandbox.baseUrl;
 }
 
-function generatePhonePeChecksum(payload, endpoint) {
-  const saltKey = process.env.PHONEPE_SALT_KEY;
+function generatePhonePeChecksum(base64Payload, endpoint) {
+  const clientSecret = process.env.PHONEPE_CLIENT_SECRET;
   const saltIndex = process.env.PHONEPE_SALT_INDEX || '1';
 
-  const base64Payload = Buffer.from(JSON.stringify(payload)).toString('base64');
-  const stringToHash = base64Payload + endpoint + saltKey;
+  const stringToHash = base64Payload + endpoint + clientSecret;
   const sha256Hash = crypto.createHash('sha256').update(stringToHash).digest('hex');
 
-  return {
-    base64Payload,
-    checksum: sha256Hash + '###' + saltIndex
-  };
+  return sha256Hash + '###' + saltIndex;
 }
 
 export async function createPhonePePayment(order, callbackUrl) {
   try {
-    const merchantId = process.env.PHONEPE_MERCHANT_ID;
+    const clientId = process.env.PHONEPE_CLIENT_ID;
+    const clientSecret = process.env.PHONEPE_CLIENT_SECRET;
+
+    if (!clientId || !clientSecret) {
+      throw new Error('PhonePe credentials not configured');
+    }
+
     const merchantTransactionId = order.id.replace(/-/g, '').slice(0, 35); // PhonePe limit: 35 chars
 
     const payload = {
-      merchantId,
+      merchantId: clientId,
       merchantTransactionId,
-      merchantUserId: order.registration?.userEmail || 'guest',
+      merchantUserId: order.registration?.userEmail?.replace(/[^a-zA-Z0-9]/g, '') || 'guest',
       amount: order.amountCents, // Amount in paise
       redirectUrl: callbackUrl,
-      redirectMode: 'POST',
-      callbackUrl: `${process.env.FRONTEND_URL}/api/webhooks/phonepe`,
+      redirectMode: 'REDIRECT',
+      callbackUrl: callbackUrl,
       paymentInstrument: {
         type: 'PAY_PAGE'
       }
     };
 
+    const base64Payload = Buffer.from(JSON.stringify(payload)).toString('base64');
     const endpoint = '/pg/v1/pay';
-    const { base64Payload, checksum } = generatePhonePeChecksum(payload, endpoint);
+    const checksum = generatePhonePeChecksum(base64Payload, endpoint);
+
+    console.log('PhonePe payment request:', { clientId, merchantTransactionId, amount: order.amountCents });
 
     const response = await fetch(`${getPhonePeBaseUrl()}${endpoint}`, {
       method: 'POST',
@@ -107,6 +112,7 @@ export async function createPhonePePayment(order, callbackUrl) {
     });
 
     const data = await response.json();
+    console.log('PhonePe payment initiation failed:', data);
 
     if (data.success && data.data?.instrumentResponse?.redirectInfo?.url) {
       return {
@@ -126,12 +132,12 @@ export async function createPhonePePayment(order, callbackUrl) {
 
 export async function checkPhonePePaymentStatus(merchantTransactionId) {
   try {
-    const merchantId = process.env.PHONEPE_MERCHANT_ID;
-    const saltKey = process.env.PHONEPE_SALT_KEY;
+    const clientId = process.env.PHONEPE_CLIENT_ID;
+    const clientSecret = process.env.PHONEPE_CLIENT_SECRET;
     const saltIndex = process.env.PHONEPE_SALT_INDEX || '1';
 
-    const endpoint = `/pg/v1/status/${merchantId}/${merchantTransactionId}`;
-    const stringToHash = endpoint + saltKey;
+    const endpoint = `/pg/v1/status/${clientId}/${merchantTransactionId}`;
+    const stringToHash = endpoint + clientSecret;
     const sha256Hash = crypto.createHash('sha256').update(stringToHash).digest('hex');
     const checksum = sha256Hash + '###' + saltIndex;
 
@@ -140,11 +146,12 @@ export async function checkPhonePePaymentStatus(merchantTransactionId) {
       headers: {
         'Content-Type': 'application/json',
         'X-VERIFY': checksum,
-        'X-MERCHANT-ID': merchantId
+        'X-MERCHANT-ID': clientId
       }
     });
 
     const data = await response.json();
+    console.log('PhonePe status check response:', data);
 
     return {
       success: data.success,
@@ -163,10 +170,10 @@ export async function checkPhonePePaymentStatus(merchantTransactionId) {
 
 export function verifyPhonePeCallback(xVerifyHeader, responseBody) {
   try {
-    const saltKey = process.env.PHONEPE_SALT_KEY;
+    const clientSecret = process.env.PHONEPE_CLIENT_SECRET;
     const saltIndex = process.env.PHONEPE_SALT_INDEX || '1';
 
-    const stringToHash = responseBody + '/pg/v1/status' + saltKey;
+    const stringToHash = responseBody + '/pg/v1/status' + clientSecret;
     const sha256Hash = crypto.createHash('sha256').update(stringToHash).digest('hex');
     const expectedChecksum = sha256Hash + '###' + saltIndex;
 

frontend/src/pages/public/RegistrationPage.jsx

@@ -379,9 +379,10 @@ export default function RegistrationPage() {
                         {paymentGateway === 'RAZORPAY' && <div className="w-2 h-2 rounded-full bg-[#E23744]" />}
                       </div>
                       {/* Razorpay Logo */}
-                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="flex-shrink-0">
-                        <rect width="24" height="24" rx="4" fill="#072654" />
-                        <path d="M7.5 6L10.5 18H13.5L16.5 6H13.5L12 12L10.5 6H7.5Z" fill="white" />
+                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="flex-shrink-0">
+                        <rect width="28" height="28" rx="6" fill="#072654" />
+                        <path d="M8 7L11.5 21H14.5L12 11L14 7H8Z" fill="#3395FF" />
+                        <path d="M14.5 7L12 17H15L18 11L20 7H14.5Z" fill="white" />
                       </svg>
                       <div>
                         <div className="font-medium">Razorpay</div>
@@ -408,10 +409,10 @@ export default function RegistrationPage() {
                         {paymentGateway === 'PHONEPE' && <div className="w-2 h-2 rounded-full bg-purple-500" />}
                       </div>
                       {/* PhonePe Logo */}
-                      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="flex-shrink-0">
-                        <rect width="24" height="24" rx="4" fill="#5F259F" />
-                        <path d="M12 4C14.5 4 16.5 6 16.5 8.5V12H14V8.5C14 7.12 12.88 6 11.5 6C10.12 6 9 7.12 9 8.5V16H6.5V8.5C6.5 6 8.5 4 11 4H12Z" fill="white" />
-                        <circle cx="12" cy="17" r="2" fill="white" />
+                      <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="flex-shrink-0">
+                        <rect width="28" height="28" rx="6" fill="#5F259F" />
+                        <path d="M10 8H14C16.2 8 18 9.8 18 12V13H15V12C15 11.45 14.55 11 14 11H13V20H10V8Z" fill="white" />
+                        <circle cx="14" cy="20" r="2" fill="#5CDB5C" />
                       </svg>
                       <div>
                         <div className="font-medium">PhonePe</div>