How to Create an Affiliate Program with Nuxt | AffiliateBase

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          innerHTML: '(function(w,r){w._abq=w._abq||[];w[r]=w[r]||function(){(w[r].q=w[r].q||[]).push(arguments)}})(window,"affiliatebase");',
        },
        {
          src: 'https://cdn.jsdelivr.net/npm/affiliatebase-tracking@1/src/index.js',
          async: true,
          'data-org-id': 'YOUR_ORG_ID',
        },
      ],
    },
  },
})

npm install affiliatebase-tracking

// In a Nuxt plugin (plugins/affiliatebase.client.ts)
import 'affiliatebase-tracking';

export default defineNuxtPlugin(() => {
  // Plugin runs client-side only
});

// composables/useAffiliateTracking.ts
export const useAffiliateTracking = () => {
  const referralId = ref<string>('');
  const isReady = ref(false);

  onMounted(() => {
    if (typeof window !== 'undefined' && window.affiliatebase) {
      window.affiliatebase('ready', () => {
        referralId.value = window.affiliatebase_referral || '';
        isReady.value = true;
      });
    }
  });

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

  return { referralId, isReady, trackConversion };
};

// server/api/checkout.post.ts
import Stripe from 'stripe';

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

export default defineEventHandler(async (event) => {
  const body = await readBody(event);
  const { referralId, priceId } = body;

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

  return { url: session.url };
});

<!-- pages/pricing.vue -->
<script setup>
const { referralId } = useAffiliateTracking();

const handleCheckout = async () => {
  const { url } = await $fetch('/api/checkout', {
    method: 'POST',
    body: {
      referralId: referralId.value,
      priceId: 'price_xxx',
    },
  });
  navigateTo(url, { external: true });
};
</script>

<template>
  <button @click="handleCheckout">Subscribe</button>
</template>