React library to integrate Paystack payment gateway (hook, button, consumer) using @paystack/inline-js.
npm install @makozi/paystack-react-pay
bash
npm install @makozi/paystack-react-pay
`
or
`bash
yarn add @makozi/paystack-react-pay
`
---
Table of Contents
- Features
- Installation
- Usage
- Props
- Styling
- Visualization
- Contributing
- License
- Repository
- Homepage
---
Features
- 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.
---
Installation
`bash
npm install @makozi/paystack-react-pay
`
or
`bash
yarn add @makozi/paystack-react-pay
`
---
Usage
$3
Integrate Paystack using the usePaystack hook for full control:
`tsx
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 ;
};
`
$3
Use the PaystackButton component for a quick integration:
`tsx
import { PaystackButton } from "@makozi/paystack-react-pay";
const ButtonExample = () => (
email="test@example.com"
amount={500000}
onSuccess={(res) => console.log(res)}
onClose={() => console.log("Closed")}
text="Pay with Button"
/>
);
`
$3
Use the PaystackConsumer for advanced scenarios and render props:
`tsx
import { PaystackConsumer } from "@makozi/paystack-react-pay";
const ConsumerExample = () => (
publicKey: "pk_test_xxxx",
email: "test@example.com",
amount: 500000,
onSuccess: (res) => console.log(res),
onClose: () => console.log("Closed")
}}
>
{(initializePayment) => (
)}
);
`
---
Props
All integration styles accept the following props:
| Prop | Type | Required | Description | Default |
|--------------|----------|----------|---------------------------------------------|-----------|
| publicKey | string | Yes | Paystack public key | — |
| email | 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 |
$3
- onSuccess(response): Invoked with the Paystack transaction response on successful payment.
- onClose()`: Invoked when the payment modal is closed without completing payment.