How to Integrate Pardot with V0

Open V0 at v0.dev and describe the lead capture or prospect form interface you need. For B2B marketing forms, the most important details to specify are the form fields (standard prospect fields like first name, last name, business email, company name, company size, and job title), the visual style (enterprise-appropriate, clean, professional), the submit button copy, and what happens after submission (success message, redirect, or a multi-step form flow). V0 generates clean React forms with Tailwind CSS and shadcn/ui components — the form validation, loading states, and error displays are all included if you describe them in your prompt. For Pardot specifically, it is valuable to have hidden fields that capture UTM parameters (utm_source, utm_medium, utm_campaign, utm_content, utm_term) from the URL — these parameters are commonly passed on marketing landing pages and Pardot uses them for campaign attribution. Describe this requirement to V0 and it will generate code that reads URL search parameters using useSearchParams() and includes them in the form submission payload. The form should POST to /api/pardot/prospects on submission with the prospect data as a JSON body. After generating the form UI, use V0's Git panel to push the code to your GitHub repository before creating the API route that processes the submissions.

Before writing the API route, configure a Salesforce Connected App that grants your Next.js server access to the Pardot API. In Salesforce, navigate to Setup → Apps → App Manager → New Connected App. Fill in: Connected App Name (e.g., 'Website Lead Capture'), Contact Email (your email), and enable OAuth Settings. In the OAuth section, check 'Enable OAuth Settings', add a callback URL (use https://your-app.vercel.app/api/auth/callback as a placeholder), and select the OAuth scopes: 'Access and manage your Pardot data (pardot_api)' and 'Perform requests on your behalf at any time (refresh_token, offline_access)'. Save the Connected App. After a few minutes, the Consumer Key (client ID) and Consumer Secret (client secret) appear on the app's page — copy both. For server-to-server integrations where your Next.js API route calls Pardot without a user present, use the OAuth 2.0 Username-Password flow with a dedicated Salesforce API user's credentials (username and password + security token). The security token is generated from Salesforce user settings → Reset My Security Token. This is the most straightforward flow for server-side integrations: exchange username + password + security token + client credentials for an access token, then use that access token to call Pardot APIs. The access token is valid for the Salesforce session duration (typically 2 hours) and should be cached and refreshed automatically in your API route.

1// app/api/pardot/prospects/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const SALESFORCE_TOKEN_URL = 'https://login.salesforce.com/services/oauth2/token';
5const PARDOT_API_BASE = 'https://pi.pardot.com/api/v5';
6
7let cachedToken: { token: string; expiresAt: number } | null = null;
8
9async function getSalesforceAccessToken(): Promise<string> {
10  if (cachedToken && Date.now() < cachedToken.expiresAt) {
11    return cachedToken.token;
12  }
13
14  const { SF_CLIENT_ID, SF_CLIENT_SECRET, SF_USERNAME, SF_PASSWORD, SF_SECURITY_TOKEN } =
15    process.env;
16
17  if (!SF_CLIENT_ID || !SF_CLIENT_SECRET || !SF_USERNAME || !SF_PASSWORD) {
18    throw new Error('Salesforce credentials are not configured');
19  }
20
21  const response = await fetch(SALESFORCE_TOKEN_URL, {
22    method: 'POST',
23    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
24    body: new URLSearchParams({
25      grant_type: 'password',
26      client_id: SF_CLIENT_ID,
27      client_secret: SF_CLIENT_SECRET,
28      username: SF_USERNAME,
29      password: `${SF_PASSWORD}${SF_SECURITY_TOKEN || ''}`,
30    }),
31  });
32
33  if (!response.ok) {
34    const error = await response.json();
35    throw new Error(error.error_description || 'Salesforce authentication failed');
36  }
37
38  const data = await response.json();
39  // Cache token for 90 minutes (Salesforce sessions last 2 hours)
40  cachedToken = { token: data.access_token, expiresAt: Date.now() + 90 * 60 * 1000 };
41  return data.access_token;
42}
43
44async function pardotRequest(path: string, options: RequestInit = {}) {
45  const businessUnitId = process.env.PARDOT_BUSINESS_UNIT_ID;
46  if (!businessUnitId) throw new Error('PARDOT_BUSINESS_UNIT_ID is not configured');
47
48  const token = await getSalesforceAccessToken();
49
50  const response = await fetch(`${PARDOT_API_BASE}${path}`, {
51    ...options,
52    headers: {
53      Authorization: `Bearer ${token}`,
54      'Pardot-Business-Unit-Id': businessUnitId,
55      'Content-Type': 'application/json',
56      ...((options.headers as Record<string, string>) || {}),
57    },
58  });
59
60  if (!response.ok) {
61    const error = await response.json().catch(() => ({}));
62    throw new Error(error.message || `Pardot API error ${response.status}`);
63  }
64
65  return response.json();
66}
67
68export async function POST(request: NextRequest) {
69  let body: {
70    email: string;
71    firstName?: string;
72    lastName?: string;
73    company?: string;
74    jobTitle?: string;
75    utmSource?: string;
76    utmMedium?: string;
77    utmCampaign?: string;
78  };
79
80  try {
81    body = await request.json();
82  } catch {
83    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
84  }
85
86  if (!body.email) {
87    return NextResponse.json({ error: 'Email is required' }, { status: 400 });
88  }
89
90  try {
91    const prospectData: Record<string, unknown> = {
92      email: body.email,
93      firstName: body.firstName,
94      lastName: body.lastName,
95      company: body.company,
96      jobTitle: body.jobTitle,
97      utmSource: body.utmSource,
98      utmMedium: body.utmMedium,
99      utmCampaign: body.utmCampaign,
100      // Prospects are created via upsert — Pardot deduplicates by email
101    };
102
103    // Remove undefined values
104    Object.keys(prospectData).forEach((k) => prospectData[k] === undefined && delete prospectData[k]);
105
106    const result = await pardotRequest('/prospects', {
107      method: 'POST',
108      body: JSON.stringify(prospectData),
109    });
110
111    return NextResponse.json({ success: true, prospectId: result.id }, { status: 201 });
112  } catch (error) {
113    const message = error instanceof Error ? error.message : 'Failed to create prospect';
114    console.error('Pardot prospect creation failed:', message);
115    return NextResponse.json({ error: message }, { status: 500 });
116  }
117}

Update your V0-generated form component to submit prospect data to /api/pardot/prospects and handle the response. The form submission handler should gather all field values into a JSON object matching the API route's expected body shape, POST the JSON to /api/pardot/prospects, and display a success or error state based on the response. For the UTM parameter capture, use the useSearchParams() hook from next/navigation in a client component to read utm_source, utm_medium, and utm_campaign from the URL, and include these values in the POST body. Test the integration locally by running npm run dev and adding all five Salesforce environment variables to your .env.local file: SF_CLIENT_ID, SF_CLIENT_SECRET, SF_USERNAME (the Salesforce API user's username), SF_PASSWORD (that user's password), SF_SECURITY_TOKEN (the security token reset from Salesforce user settings), and PARDOT_BUSINESS_UNIT_ID. To find your Pardot Business Unit ID, go to Salesforce Setup → Marketing Setup → Account Engagement Business Units — the ID is a 15-character string starting with '0Uv'. Submit a test form with a unique test email address and verify in Pardot (Pardot dashboard → Prospects) that the new prospect appears with the correct field values and campaign source data. Check the Prospect's activities tab to confirm the API-created activity is recorded. If the prospect does not appear, check the Next.js server console for error messages from the API route — common issues include incorrect Salesforce credentials (401) or a Business Unit ID mismatch (400).

Push your code to GitHub and configure all Salesforce and Pardot credentials in the Vercel Dashboard. Navigate to Settings → Environment Variables and add six variables: SF_CLIENT_ID (the Consumer Key from your Salesforce Connected App), SF_CLIENT_SECRET (the Consumer Secret from the Connected App — treat this with the same care as a database password), SF_USERNAME (the Salesforce username of the API user — typically an email address like api.user@yourcompany.com), SF_PASSWORD (the password for that Salesforce user — note this is the account password, not a generated API key), SF_SECURITY_TOKEN (the Salesforce security token for the API user, generated from the user's Salesforce settings by clicking Reset My Security Token — it's emailed to the user's address), and PARDOT_BUSINESS_UNIT_ID (the 15-character ID starting with '0Uv' from Salesforce Setup → Marketing Setup → Account Engagement Business Units). None of these variables should have the NEXT_PUBLIC_ prefix — all are server-only secrets used exclusively in the API route. Set all variables for Production and Preview environments. After saving and deploying, test the live integration by submitting the form on your deployed Vercel URL and verifying the prospect appears in Pardot within a few seconds. If you encounter Salesforce IP restriction errors (error_description: 'REQUEST NOT ALLOWED'), add the Vercel IP ranges to Salesforce's network access allowlist in Salesforce Setup → Security → Network Access. For ongoing security, periodically rotate the SF_CLIENT_SECRET in Salesforce and update the Vercel environment variable, then redeploy.