How to Create an Affiliate Program with React | AffiliateBase

npm install @affiliatebase/sdk

// context/AffiliateContext.tsx
import { createContext, useContext } from 'react';
import { AffiliateBase } from '@affiliatebase/sdk';

const AffiliateContext = createContext<AffiliateBase | null>(null);

export const AffiliateProvider = ({ children, apiKey }) => {
  const affiliate = new AffiliateBase({ apiKey });
  return (
    <AffiliateContext.Provider value={affiliate}>
      {children}
    </AffiliateContext.Provider>
  );
};

export const useAffiliate = () => {
  const context = useContext(AffiliateContext);
  if (!context) throw new Error('useAffiliate must be used within AffiliateProvider');
  return context;
};

// hooks/useAffiliateTracking.ts
import { useAffiliate } from '../context/AffiliateContext';

export const useAffiliateTracking = () => {
  const affiliate = useAffiliate();
  
  const trackConversion = async (data: {
    affiliateId?: string;
    amount: number;
    type: string;
  }) => {
    await affiliate.trackConversion(data);
  };
  
  return { trackConversion };
};

// components/CheckoutButton.tsx
import { useAffiliateTracking } from '../hooks/useAffiliateTracking';

export const CheckoutButton = () => {
  const { trackConversion } = useAffiliateTracking();
  
  const handleCheckout = async () => {
    await trackConversion({
      type: 'purchase',
      amount: 99.99,
    });
    // Your checkout logic
  };
  
  return <button onClick={handleCheckout}>Checkout</button>;
};