27/07/2026
🔑 Paystack Integration in React 19 — The Complete Setup (Free Tier Included)
Every Nigerian web app eventually needs to collect payments. Paystack is the answer — and it's easier to integrate than most developers think.
Here's the complete React 19 setup:
📦 Step 1: Install the package
npm install react-paystack
🔧 Step 2: Set up your config
```jsx
const config = {
reference: new Date().getTime().toString(),
email: userEmail,
amount: 500000, // Amount in KOBO (₦5,000 = 500000 kobo)
publicKey: import.meta.env.VITE_PAYSTACK_PUBLIC_KEY,
};
```
⚡ Step 3: Trigger payment
```jsx
import { usePaystackPayment } from 'react-paystack';
const initializePayment = usePaystackPayment(config);
initializePayment(onSuccess, onClose)}>
Pay ₦5,000
```
✅ Step 4: Handle success
```jsx
const onSuccess = (reference) => {
console.log('Payment successful:', reference);
// Update your database, send email, etc.
};
```
💡 Pro tips:
- Always store your secret key server-side only — never in your React frontend
- Use Paystack's test keys during development (no real money moves)
- Verify transactions server-side using Paystack's verification endpoint
- The free tier has zero monthly fees — Paystack takes 1.5% per transaction
Save this post. Your next client will definitely ask for payment integration. 🔖
