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...

First install @paystack/inline-js

import { useCallback, useState } from "react";

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

	const initializePayment = useCallback(
		({ onSuccess, onCancel } = {}) => {
			if (typeof window === "undefined") return;

			// Load only when called in the browser
			const PaystackPop = require("@paystack/inline-js").default;

			setLoading(true);

			const popup = new 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>