@makozi/paystack-react-pay is a lightweight, fully-typed React library for seamless integration with the Paystack Payment Gateway. It supports three integration patterns: Hook, Button, and Consumer, making it easy to add secure payments to your React or Next.js applications.
Below is a screenshot of the Paystack payment modal in test mode:
npm install @makozi/paystack-react-payyarn add @makozi/paystack-react-pay- Three integration styles: Use as a Hook, Button, or Consumer for maximum flexibility.
- TypeScript support: Full type definitions for safety and autocompletion.
- Lightweight: Minimal dependencies and easy to integrate.
- Paystack inline integration: Secure, fast, and reliable payment experience.
- Customizable: Pass additional metadata, currency, and reference.
- Easy callbacks: Handle payment success and close events with simple functions.
npm install @makozi/paystack-react-payyarn add @makozi/paystack-react-payIntegrate Paystack using the usePaystack hook for full control:
import { usePaystack } from "@makozi/paystack-react-pay";
const HookExample = () => {
const { initializePayment } = usePaystack({
publicKey: "pk_test_xxxx",
email: "test@example.com",
amount: 500000, // Amount in kobo
onSuccess: (res) => console.log(res),
onClose: () => console.log("Closed")
});
return <button onClick={initializePayment}>Pay with Hook</button>;
};Use the PaystackButton component for a quick integration:
import { PaystackButton } from "@makozi/paystack-react-pay";
const ButtonExample = () => (
<PaystackButton
publicKey="pk_test_xxxx"
email="test@example.com"
amount={500000}
onSuccess={(res) => console.log(res)}
onClose={() => console.log("Closed")}
text="Pay with Button"
/>
);Use the PaystackConsumer for advanced scenarios and render props:
import { PaystackConsumer } from "@makozi/paystack-react-pay";
const ConsumerExample = () => (
<PaystackConsumer
config={{
publicKey: "pk_test_xxxx",
email: "test@example.com",
amount: 500000,
onSuccess: (res) => console.log(res),
onClose: () => console.log("Closed")
}}
>
{(initializePayment) => (
<button onClick={initializePayment}>Pay with Consumer</button>
)}
</PaystackConsumer>
);All integration styles accept the following props:
| Prop | Type | Required | Description | Default |
|---|---|---|---|---|
| publicKey | string | Yes | Paystack public key | — |
| string | Yes | Customer email | — | |
| amount | number | Yes | Amount in kobo (e.g., 500000 for ₦5,000) | — |
| reference | string | No | Optional transaction reference | Auto-gen |
| currency | string | No | Currency code (e.g., NGN, USD, GHS) | NGN |
| metadata | object | No | Additional data to pass to Paystack | — |
| onSuccess | function | Yes | Callback on successful payment | — |
| onClose | function | No | Callback when payment modal is closed | — |
| text | string | No | Button text (for Button only) | Pay Now |
onSuccess(response): Invoked with the Paystack transaction response on successful payment.onClose(): Invoked when the payment modal is closed without completing payment.
The package is UI-agnostic and does not include styles. You can style your payment button or modal as needed in your application.
Note: Before deploying to a live/production environment, ensure you update your Paystack public key from the test key to your live key. Using a test key in production will block real transactions and may compromise your integration.
Contributions are welcome! Please open issues for bugs or feature requests, and submit pull requests for improvements. All contributions should follow the code of conduct and include clear documentation and tests where applicable.
MIT © Makozi Marizu-Ibewiro
If you found this project helpful, please consider starring the repository on GitHub, it means a lot! Feel free to share the link on Twitter or any social platform to help others discover it.
Stay connected and follow me on Twitter: @marizu_makozi
Thank you for your support!
— Makozi Marizu-Ibewiro