Sir-HatX/mpesa-intergration-next.js

Simple C2B stkpush implementation # Simple M-Pesa STK Push Next.js This project is a simple implementation of an M-Pesa payment integration using Next.js. It allows users to input an amount and a phone number to initiate an M-Pesa transaction through a form. The application communicates with Safaricom's API to perform the STK push and handle callbacks. ## Project Structure ``` simple-mpesa-nextjs ├── components │ └── MpesaForm.tsx # React component for M-Pesa form ├── pages │ ├── api │ │ ├── initiate-stk.ts # API route to initiate STK push │ │ └── callback.ts # API route to handle Safaricom callback │ └── index.tsx # Main entry point of the application ├── lib │ └── mpesa.ts # Utility functions for M-Pesa API interaction ├── types │ └── index.d.ts # TypeScript types and interfaces ├── package.json # npm configuration file ├── tsconfig.json # TypeScript configuration file ├── next.config.js # Next.js configuration file └── README.md # Project documentation ``` ## Setup Instructions 1. **Clone the repository:** ```bash git clone cd simple-mpesa-nextjs ``` 2. **Install dependencies:** ```bash npm install ``` 3. **Configure environment variables (required):** - Copy the template and fill in real credentials for local development (do NOT commit real secrets): ```bash cp .env.example .env.local # Edit .env.local and add your sandbox credentials / callback URL (ngrok recommended) ``` - .env.local is ignored by default (.gitignore). Keep secrets out of git history. - Recommended: use a public ngrok/tunnel URL for M-Pesa callbacks and set M_PESA_CALLBACK_URL accordingly. 4. **Run the development server:** ```bash npm run dev ``` 5. **Access the application:** Open your browser and navigate to `localhost`. Notes: - Transaction logs are written to mpesa_trx.log (this file is in .gitignore and should not be committed). - If you accidentally committed secrets, remove th …