How to Create an Affiliate Program with Astro | AffiliateBase

•

Astro is a modern static site generator that delivers lightning-fast performance with a developer-friendly experience. If you're looking to monetize your Astro site 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 Astro, from initial setup to tracking conversions using Astro API routes and client-side islands.

Whether you're building a blog, documentation site, or marketing website, an affiliate program can help you grow your audience and increase revenue.

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

1

Add the Tracking Script

Add the AffiliateBase tracking script to your Astro layout. Add this to your base layout file. Using jsDelivr CDN ensures fast global delivery and automatic updates. No hosting required.
astro 
<!-- src/layouts/Layout.astro -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script is:inline>(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>
    <slot name="head" />
  </head>
  <body>
    <slot />
  </body>
</html>
2

Or Install via npm

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

// In a client-side script or island component
import 'affiliatebase-tracking';
3

Create API Route (SSR Mode)

Pass the referral ID as client_reference_id to Stripe for accurate conversion tracking. Create an Astro API route for Stripe checkout (requires SSR mode).
typescript 
// src/pages/api/checkout.ts
import type { APIRoute } from 'astro';
import Stripe from 'stripe';

const stripe = new Stripe(import.meta.env.STRIPE_SECRET_KEY);

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

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

  return new Response(JSON.stringify({ url: session.url }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  });
};
4

Create Checkout Component

Create an Astro component with client-side JavaScript for checkout.
astro 
<!-- src/components/CheckoutButton.astro -->
---
interface Props {
  priceId: string;
  label?: string;
}

const { priceId, label = 'Subscribe' } = Astro.props;
---

<button class="checkout-btn" data-price-id={priceId}>{label}</button>

<script>
  document.querySelectorAll('.checkout-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      const priceId = (e.target as HTMLElement).dataset.priceId;
      const referralId = window.affiliatebase_referral || '';

      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ referralId, priceId }),
      });

      const { url } = await response.json();
      window.location.href = url;
    });
  });
</script>
5

Use in Pages

Use the checkout component in your Astro pages.
astro 
<!-- src/pages/pricing.astro -->
---
import Layout from '../layouts/Layout.astro';
import CheckoutButton from '../components/CheckoutButton.astro';
---

<Layout title="Pricing">
  <h1>Pricing</h1>
  <div class="pricing-card">
    <h2>Pro Plan</h2>
    <p>$29/month</p>
    <CheckoutButton priceId="price_xxx" label="Get Started" />
  </div>
</Layout>

Why Use AffiliateBase with Astro?

AffiliateBase is the perfect solution for Astro developers who want to add affiliate marketing to their content sites.

Static Site Compatible

The tracking script runs client-side and works with Astro static builds.

SSR Support

Use Astro API routes for server-side Stripe integration in SSR mode.

Islands Architecture

Minimal JavaScript with Astro islands while still tracking conversions.

Zero Config

Drop in the script tag and start tracking. No complex setup.

Frequently Asked Questions

Does AffiliateBase work with Astro static sites?
Yes! The tracking script runs client-side. For checkout, you can redirect to Stripe's hosted checkout or use an external API.
Can I use AffiliateBase with Astro SSR?
Yes, enable SSR mode in astro.config.mjs and use API routes for server-side Stripe integration.
How do I access the referral ID in Astro?
Use window.affiliatebase_referral in client-side scripts or island 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 Remix

Complete guide to setting up an affiliate program in Remix. Step-by-step integration with Remix loaders, actions, and forms for full-stack React developers.

Ready to Launch Your Astro Affiliate Program?

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

Start Free Trial View Documentation