✨ Add Polar package and checkout flow (#6)

* ✨ Add Polar package and checkout flow

* 🔥 Remove slack webhook example

* ♻️ Fix conflict in package file

* ♻️ Update to have build time deps in devdependencies

* ♻️ Update lock file

Author: chuckcarpenter

.env.example

@@ -0,0 +1,8 @@
+# Polar.sh Integration
+POLAR_ACCESS_TOKEN=your_polar_access_token_here
+POLAR_30SEC_PRODUCT_ID=your_30sec_product_id_here
+POLAR_60SEC_PRODUCT_ID=your_60sec_product_id_here
+POLAR_SUCCESS_URL=https://whiskey.fm/sponsor/success
+
+# Optional: Set to "sandbox" for testing, "production" for live (defaults to production)
+PUBLIC_POLAR_SERVER=production

.gitignore

@@ -27,4 +27,6 @@ test-results/
 
 # macOS-specific files
 .DS_Store
-package-lock.json
+
+# AI settings
+AGENTS.md

README.md

@@ -169,3 +169,38 @@ your `starpod.config.ts` and RSS feed:
 - `/{episode-number}.html.md` - Alternative episode URL
 
 No configuration needed - it just works!
+
+## Polar.sh Checkout Integration
+
+This site uses Polar.sh for sponsor checkout. To set it up:
+
+1. **Get your Polar credentials:**
+   - Log in to your [Polar dashboard](https://polar.sh)
+   - Go to Settings → API to get your access token
+   - Create two products for your sponsorship packages (30-second and 60-second ads)
+   - Note the product IDs from each product's page
+
+2. **Configure environment variables:**
+   Create a `.env` file in the root directory with:
+   ```env
+   POLAR_ACCESS_TOKEN=your_polar_access_token_here
+   POLAR_30SEC_PRODUCT_ID=your_30sec_product_id_here
+   POLAR_60SEC_PRODUCT_ID=your_60sec_product_id_here
+   POLAR_SUCCESS_URL=https://whiskey.fm/sponsor/success
+   ```
+
+3. **Test the integration:**
+   - For testing, you can set `PUBLIC_POLAR_SERVER=sandbox` in your `.env`
+   - Visit `/sponsor` and click on either sponsorship option
+   - You'll be redirected to Polar's checkout page
+   - After successful payment, users return to `/sponsor/success`
+
+4. **Go live:**
+   - Remove `PUBLIC_POLAR_SERVER` or set it to `production`
+   - Ensure your product IDs are for production products
+   - Test with a real payment to confirm everything works
+
+The integration uses the `@polar-sh/astro` package which provides:
+- Server-side checkout session creation at `/api/checkout`
+- Automatic tax compliance through Polar's Merchant of Record service
+- Support for multiple products and dynamic pricing

package.json

@@ -26,6 +26,7 @@
     "@astrojs/preact": "^5.0.0",
     "@astrojs/vercel": "^10.0.0",
     "@libsql/client": "^0.17.2",
+    "@polar-sh/astro": "^0.4.9",
     "@preact/signals": "^2.8.2",
     "@vercel/analytics": "^1.6.1",
     "@vercel/speed-insights": "^1.3.1",
@@ -36,7 +37,8 @@
     "preact": "^10.28.4",
     "rss-to-json": "^2.1.1",
     "schema-dts": "^1.1.5",
-    "valibot": "^1.2.0"
+    "valibot": "^1.2.0",
+    "zod": "^4.1.12"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.7",

pnpm-lock.yaml

@@ -3,9 +3,10 @@ export interface Props {
   bullets: Array<string>;
   heading: string;
   price: string;
+  productId: string;
 }
 
-const { bullets, heading, price } = Astro.props;
+const { bullets, heading, price, productId } = Astro.props;
 ---
 
 <div class="dark:bg-dark-background relative z-10 mb-6 rounded-lg bg-white p-1">
@@ -37,7 +38,7 @@ const { bullets, heading, price } = Astro.props;
     </h3>
 
     <div class="flex w-full">
-      <a class="btn mb-8 w-full justify-center" href="/contact">
+      <a class="btn mb-8 w-full justify-center" href={`/api/checkout?products=${productId}`}>
         <span
           class="text-light-text-heading rounded-full px-8 py-3 text-center text-sm dark:text-white"
         >

src/components/AdPackageCard.astro

@@ -0,0 +1,10 @@
+import { Checkout } from "@polar-sh/astro";
+
+export const prerender = false;
+
+export const GET = Checkout({
+  accessToken: import.meta.env.POLAR_ACCESS_TOKEN,
+  successUrl: import.meta.env.POLAR_SUCCESS_URL || 'https://whiskey.fm/sponsor/success',
+  // Use sandbox for testing, production for live
+  server: import.meta.env.PUBLIC_POLAR_SERVER || "production",
+});

src/pages/api/checkout.ts

@@ -41,11 +41,13 @@ const countries = [
         bullets={['Host read ad', '10% off for 3+', '20% off for 6+']}
         heading="30 second ad"
         price="$500"
+        productId={import.meta.env.POLAR_30SEC_PRODUCT_ID || 'YOUR_30SEC_PRODUCT_ID'}
       />
       <AdPackageCard
         bullets={['Host read ad', '10% off for 3+', '20% off for 6+']}
         heading="60 second ad"
         price="$1,000"
+        productId={import.meta.env.POLAR_60SEC_PRODUCT_ID || 'YOUR_60SEC_PRODUCT_ID'}
       />
     </div>