Secure Online Payments in Nigeria: Complete 2025 Guide (Paystack, Flutterwave, Security)

// 1. Install Paystack React library
npm install react-paystack

// 2. Frontend: Initialize Payment (React Component)
import { PaystackButton } from 'react-paystack';

const PaystackPayment = ({ amount, email, onSuccess }) => {
  const publicKey = process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY;
  
  const config = {
    reference: `TXN-${Date.now()}`, // Unique transaction ref
    email: email,
    amount: amount * 100, // Amount in kobo (₦50,000 = 5000000 kobo)
    publicKey: publicKey,
    channels: ['card', 'bank', 'ussd'], // Enable multiple payment methods
  };

  const handlePaymentSuccess = (reference) => {
    // Verify payment on server before fulfilling order
    fetch('/api/verify-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ reference: reference.reference }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.status === 'success') {
          onSuccess(data);
        }
      });
  };

  return (
    <PaystackButton
      {...config}
      onSuccess={handlePaymentSuccess}
      onClose={() => alert('Payment cancelled')}
      className="bg-purple-600 text-white px-8 py-3 rounded-lg"
    />
  );
};

// 3. Backend: Verify Payment (Next.js API Route)
// pages/api/verify-payment.js
import https from 'https';

export default async function handler(req, res) {
  const { reference } = req.body;
  const secretKey = process.env.PAYSTACK_SECRET_KEY;

  const options = {
    hostname: 'api.paystack.co',
    port: 443,
    path: `/transaction/verify/${reference}`,
    method: 'GET',
    headers: {
      Authorization: `Bearer ${secretKey}`,
    },
  };

  const paystackReq = https.request(options, (paystackRes) => {
    let data = '';
    paystackRes.on('data', (chunk) => { data += chunk; });
    paystackRes.on('end', () => {
      const response = JSON.parse(data);
      
      if (response.data.status === 'success') {
        // Payment verified! Fulfill order in database
        res.status(200).json({ status: 'success', data: response.data });
      } else {
        res.status(400).json({ status: 'failed' });
      }
    });
  });

  paystackReq.on('error', (error) => {
    res.status(500).json({ error: 'Verification failed' });
  });

  paystackReq.end();
}

// 4. Webhook: Handle Paystack Notifications (Next.js API Route)
// pages/api/paystack-webhook.js
import crypto from 'crypto';

export default async function handler(req, res) {
  const secret = process.env.PAYSTACK_SECRET_KEY;
  const hash = crypto
    .createHmac('sha512', secret)
    .update(JSON.stringify(req.body))
    .digest('hex');

  if (hash === req.headers['x-paystack-signature']) {
    // Webhook verified! Process event
    const event = req.body;
    
    if (event.event === 'charge.success') {
      // Update order status in database
      console.log('Payment successful:', event.data.reference);
      // TODO: Mark order as paid in your database
    }
    
    res.status(200).send('OK');
  } else {
    res.status(400).send('Invalid signature');
  }
}