[SOLVED] window.rewardful is not a function when integrating Rewardful into Next.js

window.rewardful is not a function when integrating Rewardful into Next.js

I have inserted the code snippets given by rewardful into my next.js _document.js file in order to have the required code on every page, like this:

useEffect(() => {
    function func1(w,r) {
      w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}
    }
    func1(window,'rewardful');
  }, []);

And this is my head tag. APIKEY replaces the API key I have in the code:

<Head>
<link rel="preconnect" href="https://fonts.googleapis.com"></link>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet"></link>
<Script async src='https://r.wdfl.co/rw.js' data-rewardful='APIKEY'></Script>
</Head>

I am using Stripe elements as a checkout, and when I try to call window.rewardful('convert', { email: email });, or rewardful('convert', { email: email });, I am told that window.rewardful is not a function and rewardful is not defined respectively.

It is being called when paymentIntent.status is succeeded.

Solution

Solution is to not to use useEffect() and instead load required content using Next.js <Script /> tags with strategy set to before-interactive. If you don't load before interactive it won't work.

_document.js:

<body>
    ...
    <Script id="rewardful_func" strategy="beforeInteractive"> 
    {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q|| 
    []).push(arguments)}})(window,'rewardful');`
    } </Script>

    <Script id="rewardful_api" 
    strategy="beforeInteractive" 
    src="https://r.wdfl.co/rw.js" 
    data-rewardful="YOUR_REWARDFUL_CODE" >
    </Script>
</body>