react-js-phonepe-pg

A simple and ready-to-use React component to integrate PhonePe Payment Gateway in your React web application.
This package helps developers quickly trigger PhonePe checkout flow without writing complex logic.

📌 If environment is not provided, it will automatically use sandbox mode.

🚀 Installation

npm install react-js-phonepe-pg

or

yarn add react-js-phonepe-pg

import { useState } from 'react';
import PhonepePg from 'react-js-phonepe-pg';

function Payment() {
  const [initiate, setInitiate] = useState(false);

  const client_id = "your_client_id"; 
  const client_secret = "your_secret_id"; 

  const requestBody = JSON.stringify({
    "amount": 10000,
    "expireAfter": 1200,
    "metaInfo": {
      "udf1": "info-1"
    },
    "paymentFlow": {
      "type": "PG_CHECKOUT",
      "message": "Payment message",
      "merchantUrls": {
        "redirectUrl": ""
      }
    },
    "merchantOrderId": "test-order-1"
  });

  const success = (res) => console.log("Payment Success:", res);
  const error = (err) => console.log("Payment Failed:", err);

  return (
    <div>
      {initiate && (
        <PhonepePg
          bodyPayload={requestBody}
          environment="sandbox"
          client_id={client_id}
          client_secret={client_secret}
          onSuccess={success}
          onError={error}
        />
      )}

      <button onClick={() => setInitiate(true)}>Pay Now</button>
    </div>
  );
}

export default Payment;

🧩 Component Props | Prop Name | Type | Required | Default | Description | | --------------- | ---------- | -------- | ------------- | --------------------------------------------------------------------------------------------------------------------------- | | bodyPayload | string | ✔ Yes | — | Payment request body in JSON string format. Must be created using JSON.stringify({...}). | | client_id | string | ✔ Yes | — | Your PhonePe Merchant client_id used to authenticate API requests. | | client_secret | string | ✔ Yes | — | Your PhonePe Merchant client_secret used for secure checksum generation. | | environment | string | ❌ No | sandbox | The environment where the payment should run. Options: "sandbox" for testing or "production" for live transactions. | | onSuccess | function | ❌ No | console.log | Callback function triggered when payment succeeds. Receives payment response as an argument. | | onError | function | ❌ No | console.log | Callback triggered when payment fails or is cancelled. Receives error object as an argument. |

📝 Notes | Behavior | Meaning | | ----------------------------------- | --------------------------------------------------------------------------------- | | environment defaults to sandbox | If you don’t pass environment prop, payment will use Sandbox mode automatically | | Payment auto-starts on render | When <PhonepePg /> component appears in DOM, phonepe flow begins | | Callbacks are optional | If not provided, results will be logged using console.log |

💡 Tips

• Always wrap <PhonepePg /> inside a button condition like initiate === true
• Always convert payload using JSON.stringify
• After success, update your backend or redirect the user
• Callbacks are optional but recommended

🔍 Preview (coming soon)

Live demo link will be added here soon.

🤝 Support & Contributions

If you face any bugs or want to contribute:

• Open an issue on GitHub (coming soon)
• Or email support: [email protected]

We welcome pull requests that improve developer experience.