How to Create an Affiliate Program with Remix | AffiliateBase

•

Remix is a full-stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. If you're looking to monetize your Remix app through an affiliate program, you've come to the right place.

This comprehensive guide will walk you through everything you need to know about setting up an affiliate program with Remix, from initial setup to tracking conversions using Remix loaders, actions, and forms.

Whether you're building a SaaS product, membership platform, or subscription service with Stripe, an affiliate program can help you grow your user base and increase revenue.

Follow these steps to get your affiliate program up and running in Remix:

1

Add the Tracking Script

Add the AffiliateBase tracking script to your Remix app's root layout. Using jsDelivr CDN ensures fast global delivery and automatic updates. No hosting required.
typescript 
// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react';

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <script
          dangerouslySetInnerHTML={{
            __html: '(function(w,r){w._abq=w._abq||[];w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,"affiliatebase");',
          }}
        />
      </head>
      <body>
        <Outlet />
        <Scripts />
        <script
          async
          src="https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js"
          data-org-id="YOUR_ORG_ID"
        />
      </body>
    </html>
  );
}
2

Or Install via npm

Install via npm for TypeScript support and bundler integration.
bash 
npm install affiliatebase-tracking

// Import in root.tsx or entry.client.tsx
import 'affiliatebase-tracking';
3

Create a Hook for Tracking

Create a React hook to access affiliate tracking in your components.
typescript 
// app/hooks/useAffiliateTracking.ts
import { useState, useEffect } from 'react';

export const useAffiliateTracking = () => {
  const [referralId, setReferralId] = useState<string>('');
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    if (typeof window !== 'undefined' && window.affiliatebase) {
      window.affiliatebase('ready', () => {
        setReferralId(window.affiliatebase_referral || '');
        setIsReady(true);
      });
    }
  }, []);

  const trackConversion = (email: string) => {
    window.affiliatebase?.('convert', { email });
  };

  return { referralId, isReady, trackConversion };
};
4

Create Checkout Action

Pass the referral ID as client_reference_id to Stripe for accurate conversion tracking. Create a Remix action for Stripe checkout.
typescript 
// app/routes/api.checkout.tsx
import type { ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export const action = async ({ request }: ActionFunctionArgs) => {
  const body = await request.json();
  const { referralId, priceId } = body;

  const session = await stripe.checkout.sessions.create({
    success_url: `${process.env.APP_URL}/success`,
    cancel_url: `${process.env.APP_URL}/cancel`,
    customer_creation: 'always',
    ...(referralId && { client_reference_id: referralId }),
    line_items: [{ price: priceId, quantity: 1 }],
    mode: 'subscription',
  });

  return json({ url: session.url });
};
5

Use in Components

Use the hook in your Remix components to pass the referral ID.
typescript 
// app/routes/pricing.tsx
import { useAffiliateTracking } from '~/hooks/useAffiliateTracking';

export default function Pricing() {
  const { referralId } = useAffiliateTracking();

  const handleCheckout = async () => {
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ referralId, priceId: 'price_xxx' }),
    });
    const { url } = await response.json();
    window.location.href = url;
  };

  return <button onClick={handleCheckout}>Subscribe</button>;
}

Why Use AffiliateBase with Remix?

AffiliateBase is the perfect solution for Remix developers who want to launch an affiliate program quickly and efficiently.

Server-Side Actions

Use Remix actions for secure, server-side Stripe checkout integration.

Progressive Enhancement

Works perfectly with Remix's progressive enhancement philosophy.

Form Integration

Seamlessly track conversions from Remix forms using hidden inputs.

Type Safety

Full TypeScript support for type-safe affiliate tracking.

Frequently Asked Questions

Does AffiliateBase work with Remix forms?
Yes! You can include the referral ID as a hidden form field and access it in your action.
Can I track conversions in Remix loaders?
Loaders are for data fetching. Use actions or resource routes for tracking conversions server-side.
How do I handle client-side tracking?
Use the useAffiliateTracking hook to access window.affiliatebase_referral in your components.
What tracking parameters does AffiliateBase support?
AffiliateBase automatically detects ?via=, ?ref=, ?affiliate=, and ?a= URL parameters.

Related Platform Guides

Create an Affiliate Program with Next.js

Complete guide to setting up an affiliate program in Next.js. Step-by-step integration with code examples and best practices for Next.js developers.

Create an Affiliate Program with React

Complete guide to setting up an affiliate program in React. Step-by-step integration with React hooks, context, and components for React developers.

Create an Affiliate Program with Vue

Complete guide to setting up an affiliate program in Vue. Step-by-step integration with Vue 3, composables, and plugins for Vue developers.

Create an Affiliate Program with Svelte

Complete guide to setting up an affiliate program in Svelte. Step-by-step integration with SvelteKit, stores, and components for Svelte developers.

Create an Affiliate Program with Astro

Complete guide to setting up an affiliate program in Astro. Step-by-step integration with Astro API routes, islands, and components for content-focused sites.

Ready to Launch Your Remix Affiliate Program?

Get started with AffiliateBase today and start growing your business with affiliate marketing.

Start Free Trial View Documentation