How to Integrate Bolt.new with Podia

1# .env
2# Podia API token — available on Mover plan and above
3# Found in: Podia Dashboard → Settings → Integrations → API
4PODIA_API_TOKEN=your_podia_api_token_here
5
6# Your Podia store URL (used for embed links and fallback CTAs)
7NEXT_PUBLIC_PODIA_STORE_URL=https://yourname.podia.com

1// app/api/podia/customers/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4export interface PodiaProduct {
5  id: string;
6  name: string;
7  access_url: string;
8  created_at: string;
9}
10
11export interface PodiaSubscription {
12  id: string;
13  status: 'active' | 'cancelled' | 'past_due';
14  product_name: string;
15  created_at: string;
16}
17
18export interface PodiaCustomer {
19  id: string;
20  email: string;
21  full_name: string;
22  products: PodiaProduct[];
23  subscriptions: PodiaSubscription[];
24}
25
26export async function GET(request: NextRequest) {
27  const apiToken = process.env.PODIA_API_TOKEN;
28
29  if (!apiToken) {
30    return NextResponse.json(
31      { error: 'Podia API token not configured' },
32      { status: 500 }
33    );
34  }
35
36  const { searchParams } = new URL(request.url);
37  const email = searchParams.get('email');
38
39  try {
40    const url = email
41      ? `https://developers.podia.com/v1/customers?email=${encodeURIComponent(email)}`
42      : 'https://developers.podia.com/v1/customers';
43
44    const response = await fetch(url, {
45      headers: {
46        Authorization: `Bearer ${apiToken}`,
47        'Content-Type': 'application/json',
48      },
49    });
50
51    if (!response.ok) {
52      const error = await response.text();
53      return NextResponse.json(
54        { error: `Podia API error: ${response.status}`, details: error },
55        { status: response.status }
56      );
57    }
58
59    const data = await response.json();
60    return NextResponse.json(data);
61  } catch (err) {
62    console.error('Podia API fetch failed:', err);
63    return NextResponse.json(
64      { error: 'Failed to reach Podia API' },
65      { status: 500 }
66    );
67  }
68}

1// app/dashboard/page.tsx
2'use client';
3import { useState } from 'react';
4import type { PodiaCustomer } from '@/app/api/podia/customers/route';
5
6export default function DashboardPage() {
7  const [email, setEmail] = useState('');
8  const [customer, setCustomer] = useState<PodiaCustomer | null>(null);
9  const [loading, setLoading] = useState(false);
10  const [notFound, setNotFound] = useState(false);
11
12  async function handleLookup(e: React.FormEvent) {
13    e.preventDefault();
14    setLoading(true);
15    setNotFound(false);
16    setCustomer(null);
17
18    const res = await fetch(`/api/podia/customers?email=${encodeURIComponent(email)}`);
19    const data = await res.json();
20
21    setLoading(false);
22
23    const customers: PodiaCustomer[] = Array.isArray(data) ? data : (data.customers ?? []);
24    const match = customers.find((c) => c.email.toLowerCase() === email.toLowerCase());
25
26    if (match) {
27      setCustomer(match);
28    } else {
29      setNotFound(true);
30    }
31  }
32
33  return (
34    <main className="max-w-2xl mx-auto p-8">
35      <h1 className="text-2xl font-bold mb-6">My Courses</h1>
36      <form onSubmit={handleLookup} className="flex gap-3 mb-8">
37        <input
38          type="email"
39          value={email}
40          onChange={(e) => setEmail(e.target.value)}
41          placeholder="Enter your email"
42          required
43          className="flex-1 border rounded-lg px-4 py-2"
44        />
45        <button
46          type="submit"
47          disabled={loading}
48          className="bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700 disabled:opacity-50"
49        >
50          {loading ? 'Looking up...' : 'Find My Courses'}
51        </button>
52      </form>
53
54      {notFound && (
55        <div className="text-center py-8">
56          <p className="text-gray-600 mb-4">No courses found for this email. Purchase a course to get started.</p>
57          <a
58            href={process.env.NEXT_PUBLIC_PODIA_STORE_URL}
59            className="text-indigo-600 underline"
60          >
61            Browse courses on Podia
62          </a>
63        </div>
64      )}
65
66      {customer && (
67        <div>
68          <p className="text-gray-500 mb-4">Welcome back, {customer.full_name}!</p>
69          {customer.products.length === 0 ? (
70            <p className="text-gray-600">You have no enrolled courses yet.</p>
71          ) : (
72            <div className="grid gap-4">
73              {customer.products.map((product) => (
74                <div key={product.id} className="border rounded-xl p-5 flex justify-between items-center">
75                  <div>
76                    <h3 className="font-semibold">{product.name}</h3>
77                    <p className="text-sm text-gray-500">
78                      Enrolled on{' '}
79                      {new Date(product.created_at).toLocaleDateString('en-US', {
80                        year: 'numeric',
81                        month: 'short',
82                        day: 'numeric',
83                      })}
84                    </p>
85                  </div>
86                  <a
87                    href={product.access_url}
88                    target="_blank"
89                    rel="noopener noreferrer"
90                    className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 text-sm"
91                  >
92                    Access Course
93                  </a>
94                </div>
95              ))}
96            </div>
97          )}
98        </div>
99      )}
100    </main>
101  );
102}

1// app/courses/page.tsx
2import Script from 'next/script';
3
4const PODIA_STORE_URL = process.env.NEXT_PUBLIC_PODIA_STORE_URL ?? 'https://yourname.podia.com';
5
6// Direct checkout links — no API needed, works on all Podia plans including free
7const featuredProducts = [
8  { name: 'Beginner Course', checkoutUrl: `${PODIA_STORE_URL}/beginner-course/buy` },
9  { name: 'Pro Masterclass', checkoutUrl: `${PODIA_STORE_URL}/pro-masterclass/buy` },
10  { name: 'Monthly Membership', checkoutUrl: `${PODIA_STORE_URL}/membership/buy` },
11];
12
13export default function CoursesPage() {
14  return (
15    <main className="max-w-4xl mx-auto p-8">
16      <h1 className="text-3xl font-bold mb-4">Our Courses</h1>
17
18      {/* Direct checkout links — no JavaScript required, works with ad blockers */}
19      <div className="grid grid-cols-3 gap-4 mb-12">
20        {featuredProducts.map((product) => (
21          <a
22            key={product.name}
23            href={product.checkoutUrl}
24            className="block bg-indigo-600 text-white text-center px-4 py-3 rounded-xl font-medium hover:bg-indigo-700 transition"
25          >
26            Buy {product.name}
27          </a>
28        ))}
29      </div>
30
31      {/* Full Podia storefront embed */}
32      <div id="podia-embed-container" style={{ minHeight: '600px' }}>
33        <p className="text-gray-400 text-sm">Loading storefront...</p>
34      </div>
35
36      {/* Fallback for users with JavaScript disabled or ad blockers */}
37      <p className="text-sm text-gray-500 mt-4">
38        Having trouble viewing?{' '}
39        <a href={PODIA_STORE_URL} className="text-indigo-600 underline">
40          Visit our store directly
41        </a>
42      </p>
43
44      {/* Podia embed script — lazyOnload avoids blocking page render */}
45      <Script
46        src="https://podia.com/embed.js"
47        data-store={PODIA_STORE_URL}
48        data-container="podia-embed-container"
49        strategy="lazyOnload"
50      />
51    </main>
52  );
53}

1// app/api/podia/webhook/[token]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4interface PodiaWebhookEvent {
5  event: 'new_customer' | 'new_subscription' | 'subscription_cancelled';
6  customer?: {
7    email: string;
8    full_name: string;
9  };
10  subscription?: {
11    id: string;
12    product_name: string;
13    status: string;
14  };
15}
16
17export async function POST(
18  request: NextRequest,
19  { params }: { params: { token: string } }
20) {
21  // Validate secret token in URL path
22  const expectedToken = process.env.PODIA_WEBHOOK_SECRET;
23  if (!expectedToken || params.token !== expectedToken) {
24    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
25  }
26
27  let event: PodiaWebhookEvent;
28  try {
29    event = await request.json();
30  } catch {
31    return NextResponse.json({ error: 'Invalid JSON payload' }, { status: 400 });
32  }
33
34  console.log('Podia webhook received:', JSON.stringify(event, null, 2));
35
36  switch (event.event) {
37    case 'new_customer': {
38      const { email, full_name } = event.customer ?? {};
39      console.log('New Podia customer:', email, full_name);
40      // TODO: add to email list, create user record, trigger welcome email
41      break;
42    }
43    case 'new_subscription': {
44      const { email } = event.customer ?? {};
45      const planName = event.subscription?.product_name;
46      console.log(`New subscription: ${email} subscribed to ${planName}`);
47      // TODO: update subscription status in your database
48      break;
49    }
50    case 'subscription_cancelled': {
51      const { email } = event.customer ?? {};
52      console.log('Subscription cancelled for:', email);
53      // TODO: revoke premium access in your database
54      break;
55    }
56    default:
57      console.log('Unhandled Podia event type:', (event as { event: string }).event);
58  }
59
60  return NextResponse.json({ received: true });
61}