Can't create a production build with package imported - Error occurred prerendering page; ReferenceError: window is not defined

[RamazaniMwemedi]

Whenever I try to make a production build with this component imported, it keep throwing an error as shown below

I have troubleshooted and I have noticed that the error comes from here

I have tried to import it with Dynamics but still no changes,

[JayWebtech]

Same here. Were you able to find a solution?

[Azania-Mokhampane]

getting the same issue too

[Azania-Mokhampane]

@JayWebtech @RamazaniMwemedi this worked for me,

const PayWithPaystack  = () => {
     
  const isBrowser = typeof window !== 'undefined';

  if (!isBrowser) {
    return null;
  }

  // Import your Paystack-related code here
  const { usePaystackPayment } = require('react-paystack')

const config = {...}

const initializePayment = usePaystackPayment(config);

 return (
    <button onClick={initializePayment}>
      Pay
    </button>
  );
};

export default PayWithPaystack;

[stephengade]

Started getting this error immediately I migrate to Nextjs 15, React 19 (Server component)

[RamazaniMwemedi]

An email from the developer team on how I should go around it.

Here is the link https://paystack.com/docs/api/transaction/#initialize

[stephengade]

Hmmm.... That may be straightforward approach. I should have adopted using the API directly rather than SDK.

But currently I fixed the window error by converting the whole page to client with 'use client'

I first of all mark the component with 'use client'

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

on doing that, the error is gone...

[chizidotdev]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

- import { PaystackButton } from "react-paystack";

+ import dynamic from 'next/dynamic';
+ const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
+   ssr: false,
+ });

[osfieldgaga]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

- import { PaystackButton } from "react-paystack";

+ import dynamic from 'next/dynamic';
+ const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
+   ssr: false,
+ });

this seems to work. thanks

[0necontroller]

then in /app/payment/page.tsx, I imported the payment component the dynamically disabling the SSR (of course, this will only work by marking the entire page with 'use client' as well)

@stephengade 's comment did the trick

My implementation looks like this, using the next/dynamic utility to import the PaystackButton

• import { PaystackButton } from "react-paystack";

• import dynamic from 'next/dynamic';
• const PaystackButton = dynamic(() => import("react-paystack").then((c) => c.PaystackButton), {
• ssr: false,
• });

This works great

[Kasopej]

const PayWithPaystack = () => {

const isBrowser = typeof window !== 'undefined';

if (!isBrowser) {
return null;
}

// Import your Paystack-related code here
const { usePaystackPayment } = require('react-paystack')

const config = {...}

const initializePayment = usePaystackPayment(config);

return (

Pay

);
};

export default PayWithPaystack;

This approach helped, but with linting you can't call a hook conditionally
To avoid linting errors, wrap this component in a custom ClientOnly component (remove the isBrowser conditional return)

Wrapper ClientOnly component:
[isClient, setIsClient] = useState(false) if (isClient) return null return {children}

Usage:
<ClientOnly><PaystackButton /></ClientOnly>

[CEN-Smart]

Each time I initialize my paynent from my NextJs App, I get a response like this
{
"status": "fail",
"message": "Failed to initialize Paystack transaction: Invalid URL"
}

Please what should I do

[Kasopej]

Hard to know without context, but I think you need to check you have correct callback URL configured on paystack dashboard

Looks like an issue with your paystack url configuration on the paystack admin dashboard or your backend api

[CEN-Smart]

This is my callback_url configured on my dashboard, I even added it as a payload to be sent from the frontend, yet after successful transaction, It is not redirected to it, Or can't it work on test mode?