How to Create an Affiliate Program with React | AffiliateBase

<script>(function(w,r){w._abq=w._abq||[];w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,'affiliatebase');</script>
<script async src="https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js" data-org-id='YOUR_ORG_ID'></script>

npm install affiliatebase-tracking

// In your app entry (e.g., main.tsx or App.tsx)
import 'affiliatebase-tracking';

// The script auto-initializes when data-org-id is set
// Or configure programmatically in your HTML

// hooks/useAffiliateTracking.ts
import { useState, useEffect } from 'react';

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

  useEffect(() => {
    // Wait for tracking script to initialize
    if (typeof window !== 'undefined') {
      window.affiliatebase?.('ready', () => {
        setReferralId(window.affiliatebase_referral || '');
        setIsReady(true);
      });
    }
  }, []);

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

  return { referralId, isReady, trackConversion };
};

// Get referral ID from tracking script
const referralId = window.affiliatebase_referral || '';

const session = await stripe.checkout.sessions.create({
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
  customer_creation: 'always',
  ...(referralId && { client_reference_id: referralId }),
  line_items: [
    { price: 'price_xxx', quantity: 1 },
  ],
  mode: 'subscription',
});

// In your signup/checkout component
const { trackConversion } = useAffiliateTracking();

const handleSignup = async (email: string) => {
  // Your signup logic
  await createUser(email);

  // Track the conversion
  trackConversion(email);
};