feat: added ngrok information for notify url

Author: Danushka96

src/components/PayHereTester.tsx

@@ -156,9 +156,9 @@ export default function PayHereTester() {
       custom1: '',
       custom2: '',
       sandbox: true,
-      returnUrl: 'http://localhost:5173/return',
-      cancelUrl: 'http://localhost:5173/cancel',
-      notifyUrl: 'http://localhost:5173/notify'
+      returnUrl: 'https://klass-lk.github.io/payhere-sanbox-client/return',
+      cancelUrl: 'https://klass-lk.github.io/payhere-sanbox-client/cancel',
+      notifyUrl: 'https://klass-lk.github.io/payhere-sanbox-client/notify'
     });
     setErrors({});
     setLogs([]);
@@ -229,7 +229,7 @@ export default function PayHereTester() {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          <div className="bg-white rounded-xl shadow-lg p-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 200px)' }}>
+          <div className="bg-white rounded-xl shadow-lg p-6 overflow-y-auto" style={{ maxHeight: 'calc(100vh + 200px)' }}>
             <div className="flex items-center justify-between mb-6">
               <h2 className="text-2xl font-semibold text-slate-800">Configuration Form</h2>
               <button
@@ -672,10 +672,23 @@ export default function PayHereTester() {
 
             <div className="space-y-2 text-sm text-slate-700">
               <p>1. Go to <a href="https://sandbox.payhere.lk" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">sandbox.payhere.lk</a> and create an account.</p>
-              <p>2. In the "Integrations" tab, create a new app. Use "localhost" for the domain.</p>
+              <p>2. In the "Integrations" tab, create a new app. Use "github.io" for the domain when testing using this tool.</p>
               <p>3. Copy the "Merchant ID" and the app's "Merchant Secret" into the form on the left.</p>
             </div>
 
+            <div className="mt-6">
+              <h4 className="font-semibold text-slate-700 mb-2">Testing Notify URL with a Backend Server</h4>
+              <div className="space-y-2 text-sm text-slate-700">
+                <p>The <code>notify_url</code> is used by PayHere to send a server-to-server notification to your backend to confirm the payment status. This frontend tester does not include a backend service.</p>
+                <p>To test this, you will need a separate backend application running that can receive these notifications. You can use <a href="https://ngrok.com/" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">ngrok</a> to expose your local backend server to the internet.</p>
+                <p>1. Run your backend application on a specific port (e.g., port 8080).</p>
+                <p>2. In a new terminal, run ngrok to expose that port: <code className="bg-slate-100 text-slate-800 px-2 py-1 rounded-md font-mono">ngrok http 8080</code> (replace 8080 with your backend's port).</p>
+                <p>3. Copy the "Forwarding" URL provided by ngrok.</p>
+                <p>4. Paste this URL into the "Notify URL" field in the form on the left.</p>
+                <p>When a payment is completed, PayHere will send a POST request with the payment status to your backend server via this ngrok URL.</p>
+              </div>
+            </div>
+
             <div className="mt-6">
               <h4 className="font-semibold text-slate-700 mb-2">Test Cards for Successful Payments</h4>
               <p className="text-xs text-slate-500 mb-3">For ‘Name on Card’, ‘CVV’ & ‘Expiry date’ you can enter any valid data.</p>