The verdict in three sentences
For an Ibadan store, the Paystack inline popup lets a React front end open checkout without a redirect, but the transaction verification must happen server-side with your secret key. You initialize the popup with your public key, receive a reference on success, then call the verify endpoint from your backend before marking the order paid. Local fees sit around 1.5 % (capped), settlement is typically T+1 for Nigerian accounts, and you must never trust the client callback alone.
Client vs server: where the logic lives
The public key is safe in the browser; the secret key is not. The popup runs client-side, verification runs server-side.
| Step | Client side | Server side |
|---|---|---|
| Public key | Used to open popup | Not needed |
| Secret key | Never exposed | Stored in env var |
| Open checkout | Yes (Paystack popup) | No |
| Receive reference | Yes (onSuccess) | Passed to backend |
| Verify transaction | Not trusted | Yes (GET /transaction/verify) |
| Mark order paid | No | Yes (after verify + amount check) |
On success the popup returns a reference; send it to your server, which calls the verify endpoint and checks that the returned amount matches the order before fulfilment.
Paystack technical parameters, 2026
| Parameter | Value (2026 order of magnitude) |
|---|---|
| Local fee | ~1.5 % (capped per transaction) |
| International cards | ~3.9 % + fixed fee |
| Settlement delay | T+1 (Nigerian accounts) |
| Currency | NGN (₦) |
| Verify method | Server-side GET /transaction/verify |
| Webhook signature | HMAC-SHA512 (x-paystack-signature) |
| Reference | Unique per transaction |
If you also consume webhooks, recompute the HMAC-SHA512 of the raw body with your secret and compare it in constant time to x-paystack-signature. A mismatch means reject with 401 and take no action.
Recommended integration flow
- Customer clicks pay; React opens the Paystack popup with the public key and amount in kobo.
- On success the popup returns a
reference; you POST it to your backend. - Your server calls
GET /transaction/verify/{reference}with the secret key. - You confirm
status = successand that the amount matches, then set the order topaid. - Optionally consume the webhook as a redundant source of truth with signature verification.
Mini case study
Awa, who runs a cosmetics store in Ibadan, processes 180 orders a month averaging ₦8,000, or ₦1,440,000. At roughly 1.5 % local fees she pays about ₦21,600 in monthly commissions (subject to the per-transaction cap). With T+1 settlement her cash is available the next business day, versus 3 to 4 days with some international aggregators. Over a year, her Paystack fees land near ₦259,000 on ₦17.3M processed.
Need a professional website?
Kolonell builds websites that attract clients, optimized for the Sénégalese market. Free quote in 2 minutes.
FAQ
Can I verify a Paystack transaction from React?
No. Verification needs the secret key, which must stay on the server. The popup only returns a reference; your backend verifies it.
What is the local fee in 2026?
Around 1.5 % per transaction with a per-transaction cap; international cards cost roughly 3.9 % plus a fixed fee.
How fast do I get paid?
Settlement to Nigerian bank accounts is typically T+1, so funds cleared one business day arrive the next.
Should I still use webhooks with the popup?
Yes, as a redundant source of truth. Verify the HMAC-SHA512 signature and reconcile against your verify call.
What if the customer closes the popup after paying?
Rely on server-side verify and the webhook, not the popup callback, so a closed window never loses a confirmed payment.
Let's talk about your project. We wire Paystack popup checkout with server-side verification and signed webhooks for your Ibadan store. WhatsApp +221 77 596 93 33.
Mohamed Bah
Fondateur, Kolonell
Passionate about digital and entrepreneurship in Africa, Mohamed has been helping Sénégalese businesses with their digital transformation since 2020. Founder of Kolonell, he believes every SME deserves a professional and accessible online présence.
