How to Integrate Etsy API with V0

Start by using V0's chat interface to generate the React component that will display your Etsy listings. This is the UI layer — you're describing the visual design and layout you want, and V0 will produce a complete Next.js component with Tailwind CSS styling. Be specific about how you want each product card to look: image size, price formatting, the 'Buy on Etsy' button style, hover effects, and the overall grid layout. Describe your brand aesthetic — whether it's warm and artisanal, minimal and modern, or bold and colorful — so V0 produces styling that matches your identity. At this stage, V0 will generate the component with placeholder or mock data. That's expected — you'll connect it to the real Etsy API in the next steps. Focus on getting the layout and visual design right first. You can use the V0 Design Mode (Option+D) to tweak colors, spacing, and typography without spending generation credits. Once you're happy with the design, click 'Publish to Production' in V0 to get a live Vercel URL, and make note of the project — you'll be adding code to it in the following steps.

Before writing any code, you need to register your application in the Etsy Developer Portal to obtain your API credentials. Navigate to developers.etsy.com and sign in with your Etsy account. Click 'Create a New App' and fill in the application details: give it a name like 'My Shop Storefront', select the appropriate app type (website), and provide your Vercel deployment URL as the callback URL. The callback URL format should be https://your-app.vercel.app/api/etsy/callback — you'll need the exact URL from your Vercel project dashboard. After creating the app, Etsy will display your API Key (also called the keystring) and your Shared Secret. Copy both of these immediately and store them in a secure password manager — you'll need them as environment variables. Also note that the Etsy API v3 uses OAuth 2.0 with PKCE for user-level access (to read orders and private shop data) but supports simple API key authentication for reading public listing data. For a public storefront displaying your own shop's public listings, you may only need the API key and your shop name. Keep your Shared Secret confidential — it should never appear in client-side code.

Now create the server-side API route that will proxy requests to the Etsy API. This route runs on Vercel's serverless infrastructure, meaning your Etsy API key stays completely server-side and is never exposed to the browser. In your V0 project, open the Code editor (Dev Mode or export to GitHub and edit locally) and create a new file at app/api/etsy/listings/route.ts. The route fetches your shop's active listings from the Etsy Open API v3 endpoint. The base URL is https://openapi.etsy.com/v3/application/ and every request must include your API key in the x-api-key header. The listings endpoint is /shops/{shop_id}/listings/active and supports pagination via limit and offset query parameters. The response includes listing_id, title, description, price (amount and currency_code), quantity, state, and url — plus an images array that you'll need to fetch separately via /listings/{listing_id}/images. For a performant storefront, consider fetching listings and their first image in parallel using Promise.all, or fetching listing images on-demand rather than upfront. Add error handling for the case where the Etsy API returns a 429 rate limit response — the API allows 10 requests per second by default.

1// app/api/etsy/listings/route.ts
2import { NextResponse } from 'next/server';
3
4const ETSY_API_BASE = 'https://openapi.etsy.com/v3/application';
5
6export async function GET(request: Request) {
7  const { searchParams } = new URL(request.url);
8  const limit = searchParams.get('limit') || '12';
9  const offset = searchParams.get('offset') || '0';
10
11  const shopId = process.env.ETSY_SHOP_ID;
12  const apiKey = process.env.ETSY_API_KEY;
13
14  if (!shopId || !apiKey) {
15    return NextResponse.json(
16      { error: 'Etsy credentials not configured' },
17      { status: 500 }
18    );
19  }
20
21  try {
22    // Fetch active listings
23    const listingsRes = await fetch(
24      `${ETSY_API_BASE}/shops/${shopId}/listings/active?limit=${limit}&offset=${offset}&includes=Images`,
25      {
26        headers: {
27          'x-api-key': apiKey,
28        },
29        next: { revalidate: 300 }, // Cache for 5 minutes
30      }
31    );
32
33    if (!listingsRes.ok) {
34      const errorText = await listingsRes.text();
35      console.error('Etsy API error:', listingsRes.status, errorText);
36      return NextResponse.json(
37        { error: `Etsy API returned ${listingsRes.status}` },
38        { status: listingsRes.status }
39      );
40    }
41
42    const data = await listingsRes.json();
43
44    // Transform to a clean response shape
45    const listings = data.results.map((listing: any) => ({
46      id: listing.listing_id,
47      title: listing.title,
48      price: {
49        amount: listing.price.amount / listing.price.divisor,
50        currency: listing.price.currency_code,
51      },
52      quantity: listing.quantity,
53      url: listing.url,
54      image: listing.images?.[0]?.url_570xN || listing.images?.[0]?.url_fullxfull || null,
55    }));
56
57    return NextResponse.json({
58      listings,
59      count: data.count,
60      total: data.count,
61    });
62  } catch (error) {
63    console.error('Failed to fetch Etsy listings:', error);
64    return NextResponse.json(
65      { error: 'Failed to fetch listings' },
66      { status: 500 }
67    );
68  }
69}

Your API route reads credentials from environment variables — now you need to add those variables to your Vercel project so they're available at runtime. Open the Vercel Dashboard at vercel.com, navigate to your project, and click Settings → Environment Variables. You'll add three variables: ETSY_API_KEY (your API key / keystring from the Etsy Developer Portal), ETSY_SHOP_ID (your numeric shop ID — you can find this by calling https://openapi.etsy.com/v3/application/shops?shop_name=YOUR_SHOP_NAME with your API key, or by looking at your shop's URL in the Etsy admin), and ETSY_SHARED_SECRET (your OAuth shared secret, for future OAuth flows). For each variable, set the Environment to Production and Preview so your deployed app and Vercel preview deployments both have access. Click Save after each variable. After adding all variables, you must trigger a new deployment for the variables to take effect — Vercel bakes environment variables into deployments at build time for production. The simplest way is to push a small commit or click Redeploy in the Vercel Dashboard. Once redeployed, your API route at /api/etsy/listings will authenticate with Etsy and return your real listing data.

Now connect your V0-generated UI to the real Etsy data by updating the component to fetch from your /api/etsy/listings endpoint. Use V0's chat to update the component, or edit the code directly in V0's code editor. The component should call the endpoint on mount using useEffect and useState (for a client component) or use Next.js Server Components with a direct fetch call (simpler and faster). The server-side approach is recommended for a listings page because it avoids a loading flash — the HTML arrives pre-populated with product data. In the V0 chat, describe that you want the listings page to be a React Server Component that fetches data from /api/etsy/listings at render time. V0 will generate an async server component with a fetch call and error boundary. Update the data mapping to use the fields from your API response shape: listing.id, listing.title, listing.price.amount, listing.price.currency, listing.quantity, listing.url, and listing.image. The 'Buy on Etsy' button should link to listing.url — this brings the customer directly to your Etsy listing for checkout, since Etsy handles all payment processing. For complex integration requirements, RapidDev's team can help you configure the full OAuth2 flow for accessing private order data or building a checkout redirect system.