Integrating Rewardful is a quick way to set up affiliate and referral programs for Stripe's client-side checkout. We automatically track referred Visitors, Leads and Conversions from your affiliates, customers, influencers and/or partners. Commissions are automatically adjusted for any billing event changes such as downgrades, upgrades, free trials, cancellations and refunds.

Each person that signs up to your program will receive a personalized dashboard where they can create and manage their affiliate links, stats and track their success.

To set up the integration:

Then follow these steps to complete the integration:

I. Adding the Rewardful Tracking Script

Depending on whether you're using the App Router or Page Router in your Next.js application, you'll need to add the Rewardful script to the appropriate file. New Next.js applications typically use the App Router.

Replace 'YOUR_API_KEY' with your API key from this page.

App Router

Add the following code to app/layout.js. If you already have a layout.js, you just need to add the Script components and their corresponding import statement.

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://r.wdfl.co/rw.js" data-rewardful="YOUR_API_KEY"></Script>
        <Script id="rewardful-queue" strategy="beforeInteractive">
          {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');`}
        </Script>
      </body>
    </html>
  )
}

Page Router

Add the following code to pages/_app.js. If you already have a layout.js, you just need to add the Script components and their corresponding import statement.

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://r.wdfl.co/rw.js" data-rewardful="YOUR_API_KEY"></Script>
      <Script id="rewardful-queue" strategy="beforeInteractive">
        {`(function(w,r){w._rwq=r;w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'rewardful');`}
      </Script>
    </>
  )
}

The Script components should not be nested inside Head components. This could cause issues loading the Rewardful script. See the Next.js documentation for further information.

II. Pass the referral ID from the browser to your server

When a visitor arrives on your website through an affiliate link, Rewardful creates a unique referral ID to represent that visitor. This value (a UUID string) must be passed from the browser to your server so it can be included in the Stripe API call that initiates a Checkout session or creates a customer. You could add a hidden input with the referral ID to your form and submit it to your server.

import React, {useState, useEffect} from 'react';

export default function CheckoutPage() {
  const [referral, setReferral] = useState(null)

  useEffect(() => {
    rewardful('ready', function() {
      setReferral(Rewardful.referral);
    });
  }, []);

  return (
    <form action="/create-checkout-session" method="POST">
      <section>
        { referral ? <input type="hidden" name="referral" value={referral} /> : null }
        <button type="submit" role="link">
          Checkout
        </button>
      </section>
    </form>
  )
}

III. Pass the referral ID to Stripe

The referral ID can be passed to Stripe as the client_reference_id parameter when creating a checkout session or as metadata['referral'] when creating a customer.

IV. Confirming the Rewardful dashboard initial setup

Go back to your Rewardful dashboard, click the Ok I've completed this button.
On the next set of instructions, open the link that has a ?via=install on an incognito window or private browser, let your site fully load.
Go back to your Rewardful dashboard and refresh the page. If the STEP 1 tracking script is correctly placed, it will confirm your Rewardful initial dashboard setup.
If there's no confirmation, please chat with us or email us so that we'll check things for you.

V. Referrals are not tracking? Check the following (Troubleshooting)

Make sure that:

The Rewardful tracking script is installed as described in this article.
The script from Step 1 includes your API key from the dashboard.
You are successfully passing the referral ID from the browser to your server.
The referral ID is being sent to Stripe in the correct object (checkout session or customer).
You tested using an incognito/private window.

If you still see the issue, reach out to our support team, and we’ll be happy to take a look.

Next.js Integration Method