How to Integrate Lovable with Printful

Log in to your Printful account at printful.com and navigate to Settings → Stores. Select the store you want to connect or create a new store by clicking 'Add new store'. Once in your store settings, go to the 'API' tab (sometimes listed as 'Printful API'). Click 'Generate API Key' or 'Create API Token'. Give your token a name like 'Lovable Storefront' and select the scopes your integration needs. For a storefront, you need at minimum: orders:read and orders:write (to place and check orders), catalog:read (to browse available products), and mockup_generator:write (to generate product mockups). Copy the generated token immediately — Printful shows the full token only once after generation. If you are working with a Printful API for an established store, you can also use the OAuth flow to let your customers authenticate with their own Printful stores, but API key authentication is simpler for a single-store setup.

In your Lovable project, click the '+' icon next to Preview to open the Cloud tab, then navigate to the Secrets section. Add a secret named PRINTFUL_API_KEY and paste your Printful API token as the value. The secret is immediately encrypted and accessible only from your Edge Functions via Deno.env.get('PRINTFUL_API_KEY'). Never paste a Printful API key in a Lovable chat message or in your React component code — Lovable's free tier chat history is publicly visible, and your Printful account could be accessed by anyone who sees the key. The security layer in Lovable Cloud blocks approximately 1,200 private API keys per day from being accidentally hardcoded into application code, and this SOC 2 Type II certified secrets management system is your protection against that. Your API key is encrypted at rest and in transit and never appears in any browser-accessible code or network request from your frontend.

Ask Lovable to create a Supabase Edge Function that proxies requests to Printful's REST API at https://api.printful.com. Printful's API uses Bearer token authentication — the Authorization header should be 'Bearer YOUR_API_KEY'. The Edge Function should accept a 'path' query parameter mapping to a Printful endpoint (e.g., /catalog/products, /mockup-generator/create-async/{product_id}, /orders), and for POST requests, forward the request body to Printful. The Edge Function needs to handle CORS for browser calls, read PRINTFUL_API_KEY from Deno.env.get(), and return Printful's JSON response. Printful's API base URL is https://api.printful.com — there is no sandbox mode for the API itself, but you can use test mode by adding X-PF-Store-Type: store header. All API responses are wrapped in a result key: { code: 200, result: { ... } }.

1import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
2
3const corsHeaders = {
4  "Access-Control-Allow-Origin": "*",
5  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
6};
7
8serve(async (req) => {
9  if (req.method === "OPTIONS") {
10    return new Response("ok", { headers: corsHeaders });
11  }
12
13  try {
14    const apiKey = Deno.env.get("PRINTFUL_API_KEY");
15    if (!apiKey) {
16      return new Response(
17        JSON.stringify({ error: "PRINTFUL_API_KEY not configured" }),
18        { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
19      );
20    }
21
22    const url = new URL(req.url);
23    const path = url.searchParams.get("path") || "/catalog/products";
24    url.searchParams.delete("path");
25
26    const printfulUrl = new URL(`https://api.printful.com${path}`);
27    url.searchParams.forEach((value, key) => {
28      printfulUrl.searchParams.set(key, value);
29    });
30
31    const requestOptions: RequestInit = {
32      method: req.method,
33      headers: {
34        "Authorization": `Bearer ${apiKey}`,
35        "Content-Type": "application/json",
36      },
37    };
38
39    if (req.method !== "GET" && req.method !== "HEAD") {
40      requestOptions.body = await req.text();
41    }
42
43    const response = await fetch(printfulUrl.toString(), requestOptions);
44    const data = await response.json();
45
46    return new Response(JSON.stringify(data), {
47      status: response.status,
48      headers: { ...corsHeaders, "Content-Type": "application/json" },
49    });
50  } catch (error) {
51    return new Response(
52      JSON.stringify({ error: error.message }),
53      { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
54    );
55  }
56});

Ask Lovable to create React components that fetch Printful's product catalog and display products with their variants. The Printful Catalog API at /catalog/products returns all available blank products (t-shirts, hoodies, mugs, etc.) with their IDs, names, and thumbnail images. To get detailed information including all size and color variants for a specific product, call /catalog/products/{product_id}. For mockup generation, you need to call the Mockup Generator API. First call /mockup-generator/create-async/{product_id} with a POST body containing your design file URL and the variant IDs you want mockups for. This starts an async mockup generation task. Then poll /mockup-generator/task?task_key={task_key} until the task status is 'completed', at which point the response contains the mockup image URLs. Store completed mockup URLs in Supabase so you do not regenerate them on every page load — mockup generation is rate-limited and takes several seconds per request.

When a customer completes checkout (using Stripe via Lovable's native connector or another payment method), create a Printful order via the Edge Function. The Printful Orders API at /orders accepts a POST request with a recipient object (name, address, city, country, zip) and an items array (each item has sync_variant_id or variant_id, quantity, and your retail price). For an unconfirmed order (draft mode), set confirm: false in the request — this is useful for reviewing orders before Printful charges you and starts production. For automatic fulfillment, set confirm: true. Printful will charge your account balance or connected payment method when the order is confirmed. Implement a Supabase Edge Function trigger or a scheduled function to poll /orders and sync order status updates (pending, in_process, fulfilled, canceled) back to your Supabase orders table. Store Printful order IDs alongside your own order records so you can track fulfillment status and provide customers with shipping tracking numbers when Printful ships their order.