react-paystack Incompatibility with React 19

[femakin]

Attempting to install react-paystack@6.0.0 with React 19 results in a dependency conflict due to peer dependency restrictions.

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: studyai@0.1.0
npm ERR! Found: react@19.0.0
npm ERR! node_modules/react
npm ERR! react@"^19.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" from react-paystack@6.0.0
npm ERR! node_modules/react-paystack
npm ERR! react-paystack@"*" from the root project

[ultimatekristency]

i'm having same isssue, find solution to it?

[femakin]

@ultimatekristency Not yet

[Ibeenoch]

same here, and i don't intend to use --legacy-peer-dependencies which could cause issues during production

[MY-KHEL]

Will deep force work?

[Ibeenoch]

deep force will work, but it is not recommended, as this will give issues during production.
There's two workaround to fix this:

1. You fork this github repo add it to your project root under packages/ folder. In the github repo of the paystack you forked, go to the package Json file in the peer dependency section and manually add react^19.0.0 and react-dom^19.0.0 (which is currently latest version) make sure your are in that directory and run npm install, after that go back to the root dir of your project and run:
   npm i ./packages/iamraphson/react-paystack
   And that will install the package and allow you use it in your project without issues.

2. Second way around this is to load the paystack inline script https://paystack.com/docs/developer-tools/inlinejs/

[inside-aims]

@Ibeenoch were you able to install it after adding the react ^19.0.0 and react-dom^19.0.0 ? still giving me a bunch of dep errors when I run npm install in the package repo itself.

[Chiomsyn]

I'm also having the same issue.

[Ibeenoch]

@Ibeenoch were you able to install it after adding the react ^19.0.0 and react-dom^19.0.0 ? still giving me a bunch of dep errors when I run npm install in the package repo itself.

Yes I was able it, but wouldn't recommend it. Because if you push it to GitHub, some of the files may be missing.

Instead, use paystack inline script
By installing it in react
npm i @paystack/inline-js

import Paystack from '@paystack/inline-js';

const makePaymentThroughPayStack = () => {
const popup = new Paystack()
popup.checkout({
key: PAYSTACK_TEST_PUBLIC_KEY,
email: 'email',
amount: 10000 * 100,
// handle successful transaction
onSuccess: () => {
// your logic
},
onLoad: () => {
},
onCancel: () => {

},
onError: () => {

}
})
}

[jgmagift]

I am also facing the same issue, I tried --legacy but its refusing to build in prod.

[Augustine-edeh]

Facing a same issue. I wouldn't recommend --force or --legacy-peer-deps. They both seem to work in the development server but break builds in production

[Noble-247]

npm i @paystack/inline-js

This work-around worked for me

[CaptainEboy]

To those still having this issue in 2025.

Here is a solution that works

Use @paystack/inline-js instead

by runing npm i @paystack/inline-js

If you're using typescript, Use // @ts-ignore to fix the compiler error like this

// @ts-ignore - no type declarations for @paystack/inline-js
import PaystackPop from '@paystack/inline-js';

OR

Create a custom type declaration file at src/types/paystack-inline-js.d.ts and add the code below to it

// src/types/paystack-inline-js.d.ts

declare module '@paystack/inline-js' {
// Defines the configuration object for a Paystack transaction.
export interface PaystackTransactionConfig {
key: string; // Your Paystack public key
email: string; // Customer email
amount: number; // Amount in kobo (e.g., ₦5000 should be 500000)
currency?: string; // Default: 'NGN'
ref?: string; // Optional unique transaction reference
metadata?: Record<string, any>;
onSuccess: (transaction: { reference: string; [key: string]: any }) => void;
onClose: () => void;
[key: string]: any; // Allow for other potential properties
}

// Declares the PaystackPop class and its method.
export default class PaystackPop {
newTransaction(config: PaystackTransactionConfig): void;
}
}

This would fix any errors you're encountering.

Don't forget to upvote if it also works for you so others can use it.

Thanks

[alimancs]

Use Paystack-react-lite instead compatible with react-18 and above https://github.com/alimancs/paystack-react-lite . React-Paystack doesn't seem to maintained regularly

[engrukairo]

Use Paystack-react-lite instead compatible with react-18 and above https://github.com/alimancs/paystack-react-lite . React-Paystack doesn't seem to maintained regularly

Great job there @alimancs
I've forked the repo to make it work for NextJS, using Typescript. See the further sample codes to set up the system at https://github.com/engrukairo/nextjs-paystack-react-lite

[alimancs]

Use Paystack-react-lite instead compatible with react-18 and above https://github.com/alimancs/paystack-react-lite . React-Paystack doesn't seem to maintained regularly

Great job there @alimancs I've forked the repo to make it work for NextJS, using Typescript. See the further sample codes to set up the system at https://github.com/engrukairo/nextjs-paystack-react-lite

Thanks, I appreciate the effort you put into this.

Just to clarify, paystack-react-lite is already written in TypeScript and works with Next.js (both Pages and App Router). Your repo provides an alternative implementation with additional Next.js-focused examples and setup patterns, which is useful from a DX perspective.

I’ll add a reference to it in the README under community implementations so users can explore it if it fits their needs. Nice work.