How to Integrate Lovable with Podia

Podia provides API access to store owners for managing products, sales, and subscribers programmatically. To find your API key: Log in to your Podia account at app.podia.com. Click on your account name or avatar in the top-right area to open the account menu. Navigate to Store Settings or Developer Settings. Look for an API section or API Keys. If you see the option to generate or reveal an API key, copy it. If you do not see API settings, check Podia's current plan requirements — API access may be limited to the Shaker plan and above, or may have changed since this tutorial was written. Contact Podia support to confirm API access for your current plan. Podia's API documentation is available at developers.podia.com. The API uses Bearer token authentication — your API key is sent in the Authorization: Bearer {apiKey} header on every request. The base URL for Podia's API is https://api.podia.com/v1 (verify against current documentation). Podia's main API endpoints: - GET /products — list all products with type, title, price, and description - GET /products/{id} — single product details - GET /sales — list sales transactions - GET /subscribers — list email subscribers - GET /subscribers/{id} — single subscriber details Note the distinction between Podia's product types in the API: online_course, digital_download, webinar, coaching, bundle, and membership. Use the type field to display different UI for each product type in your storefront.

Store your Podia API key in Lovable's Cloud → Secrets panel. This encrypted environment variable will be used exclusively by your Edge Function and never exposed to frontend code. In Lovable, click the '+' icon at the top of the editor to open the Cloud panel. Click the Secrets tab. Add: - Name: PODIA_API_KEY — Value: your Podia API key If Podia uses a store ID or account identifier in addition to the API key (verify in current documentation), add: - Name: PODIA_STORE_ID — Value: your Podia store ID (if required) Podia's API key grants access to all your store's data including sales transaction records and subscriber email addresses — both of which are sensitive business data. Storing it in Cloud → Secrets ensures it is encrypted and accessible only from Edge Functions. Never include it in frontend code, Git commits, or Lovable chat prompts. Lovable's security system blocks approximately 1,200 hardcoded API keys per day from being committed to code. For Podia API keys specifically, exposure would allow anyone to read your customer list and revenue data — use Cloud → Secrets exclusively.

Build the Edge Function that proxies requests from your Lovable frontend to Podia's API with Bearer token authentication. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/podia-api/index.ts. Read PODIA_API_KEY from Deno.env. Accept POST requests with body { endpoint: string, method: string, params?: object }. Call https://api.podia.com/v1/{endpoint} with Authorization: Bearer {apiKey} header. Add params as query string for GET requests. Return the Podia API response as JSON with CORS headers. If PODIA_API_KEY is not set, return a 500 error with a descriptive message.' Podia's API response format typically wraps data in a data key: { data: [...], meta: { total: 100 } }. Your frontend components should handle this wrapper pattern and access response.data to get the actual items. For the products endpoint, the response includes all product types in a flat list. Use the type field to filter and group products in your UI. The key fields per product object are: id, title, type (online_course, digital_download, webinar, coaching, bundle, membership), description, price (in cents), published (boolean), and url (the Podia checkout/landing page URL). For sales data, transactions include: id, product (nested object with title and type), purchaser (nested object with email and name), amount (in cents), created_at, and status (completed, refunded).

1// supabase/functions/podia-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const apiKey = Deno.env.get('PODIA_API_KEY');
14
15    if (!apiKey) {
16      return new Response(
17        JSON.stringify({ error: 'PODIA_API_KEY not configured in Cloud Secrets' }),
18        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19      );
20    }
21
22    const { endpoint, method = 'GET', params } = await req.json();
23
24    if (!endpoint) {
25      return new Response(
26        JSON.stringify({ error: 'endpoint is required' }),
27        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      );
29    }
30
31    let url = `https://api.podia.com/v1/${endpoint}`;
32
33    if (params && method === 'GET') {
34      const queryString = new URLSearchParams(
35        Object.entries(params).map(([k, v]) => [k, String(v)])
36      ).toString();
37      if (queryString) url += `?${queryString}`;
38    }
39
40    const response = await fetch(url, {
41      method,
42      headers: {
43        'Authorization': `Bearer ${apiKey}`,
44        'Content-Type': 'application/json',
45        'Accept': 'application/json',
46      },
47    });
48
49    const data = await response.json();
50
51    return new Response(JSON.stringify(data), {
52      status: response.status,
53      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54    });
55  } catch (error) {
56    return new Response(
57      JSON.stringify({ error: error.message }),
58      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
59    );
60  }
61});

The core value of a Podia custom storefront is presenting all product types — courses, downloads, webinars, coaching, bundles — in a unified branded design. Build the React components that handle each product type appropriately. Paste this prompt into Lovable's chat: 'Create a PodiaStorefront React component. Fetch all published products from the podia-api Edge Function (endpoint products, params { published: true }). Group products by type. Render each type with appropriate UI: - online_course: card with thumbnail, title, description preview, price, curriculum snippet (number of lessons) - digital_download: card with file-type icon, title, description, price, and file format badge - webinar: event-style card with date/time, title, speaker name, price or Free badge - coaching: CTA-style card with session length, price per session, calendar booking link - bundle: highlighted card showing included items count and savings amount vs individual prices Each card has a Buy/Enroll button linking to the Podia product URL with your tracking parameters. Show a product type filter bar at the top.' For the product image, Podia products have a cover_image or thumbnail field. If no image is set, use a category-specific placeholder image based on the product type. For pricing display: if price is 0, show a FREE badge. For positive prices, format as currency. For subscription-based products, show the subscription interval (e.g., $29/month). Check whether Podia returns a pricing_type field for this distinction. For complex creator businesses with Podia products plus external tools (email marketing, affiliate programs, CRM), RapidDev's team can help design the integrated data architecture.

Add a revenue analytics dashboard that gives creators visibility into their sales data in a more visual format than Podia's built-in analytics. Paste this prompt into Lovable's chat: 'Create a creator revenue dashboard. Fetch sales from podia-api Edge Function (endpoint sales, params { per_page: 100 }). Calculate and display: (1) KPI cards: total revenue this month (sum of amounts from sales with created_at in current month), new sales this week count, refund rate percentage. (2) Revenue by product bar chart: group sales by product.title and sum amounts. (3) Sales over time line chart: group sales by week for the last 12 weeks. (4) Recent sales feed: last 20 transactions showing buyer name (or email), product name, amount, and date. Add month navigation to view previous months. Protect this page with admin role check.' Sales amounts from Podia are in cents — divide by 100 for all display and calculation purposes. For the revenue chart, format the y-axis as currency. For subscriber tracking, add a Subscribers section showing total subscriber count (from GET /subscribers with metadata total count), new subscribers this week, and a subscriber growth chart. Subscribers are people on your Podia email list — not necessarily paying customers. Track both metrics separately.