Add support for react 19

[flagouthome]

Please add support for React 19, its been a while since this repo has been updated. I am facing issues in production when i use legacy.

[zeeblaze]

were you able to fix the production issues, because I'm not even able to install to my NextJS project with React19, I down downgraded my react and routerdom still, most packages now broken...XD

[Kontohquaye]

Facing issues with react 19

[zeeblaze]

Facing issues with react 19

Use online JS

[aberba]

If you're using Next.js or react, this is a compatible component...

Load the inline SDK somewhere earlier in your code (_document.js/ts, layout.js/ts)...

// Script is from Next.js
<Script
	src="https://js.paystack.co/v2/inline.js"
	strategy="afterInteractive"
/>

import { useCallback, useState } from "react";

export default function usePaystackPayment(config) {
	const [loading, setLoading] = useState(false);

	const initializePayment = useCallback(
		({ onSuccess, onCancel } = {}) => {
			if (!window.PaystackPop) {
				throw new Error("Paystack SDK has not loaded.");
			}

			setLoading(true);

			const popup = new window.PaystackPop();

			popup.newTransaction({
				...config,

				onSuccess: (transaction) => {
					setLoading(false);
					onSuccess?.(transaction);
				},

				onCancel: () => {
					setLoading(false);
					onCancel?.();
				},
			});
		},
		[config]
	);

	return {
		initializePayment,
		loading,
	};
}

Usage:

const { initializePayment, loading } = usePaystackPayment({
	key: process.env.NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY,
	email: customer.email,
	amount: amountInPesewas,
	currency: "GHS",
	reference,
	metadata: {
		customerId: customer.id,
	},
});

<Button
	disabled={loading}
	onClick={() =>
		initializePayment({
			onSuccess: ({ reference }) => {
				verifyPayment(reference);
			},
			onCancel: () => {
				console.log("Cancelled");
			},
		})
	}
>
	Pay
</Button>