How to Integrate Lovable with Drip

Gather the two authentication values from Drip: your API token and your Account ID. To find your API token: log in to Drip and click your account name in the top-right corner of the dashboard. Go to User Settings (this is your personal user settings, not the account settings). Scroll down to find the API Token section. Click 'Copy' to copy your API token. This token is a long string that authenticates your API requests. It is tied to your user account, not your Drip workspace — if you have multiple workspaces, the same token works across all of them. To find your Account ID: look at any URL in your Drip dashboard while logged in. The Account ID is the first number in the URL path after the domain — for example, in https://www.getdrip.com/12345678/subscribers, your Account ID is 12345678. This number appears in every Drip API endpoint URL as a path parameter. Drip's API endpoint pattern is https://api.getdrip.com/v2/{account_id}/endpoint — for example, to create a subscriber in account 12345678, you POST to https://api.getdrip.com/v2/12345678/subscribers. Having your Account ID ready means you do not need to look up the URL structure for each endpoint. Optionally, note any existing tags you use in Drip that you want to apply to subscribers added via the Lovable integration. Tags in Drip are case-sensitive strings.

Store your Drip credentials securely in Lovable's Cloud Secrets panel. In your Lovable project, click the '+' icon at the top of the editor to open the Cloud panel. Click the 'Secrets' tab and add the following secrets. First secret — Name: DRIP_API_TOKEN, Value: your Drip API token. This goes in the Authorization header as 'Bearer {token}' for every API request. Second secret — Name: DRIP_ACCOUNT_ID, Value: your numeric Account ID (e.g., 12345678). This is used to construct the API endpoint URLs — every Drip API URL contains your account ID in the path. Drip's authentication model is standard Bearer token auth. The Authorization header is 'Bearer your-api-token'. Unlike Mailchimp's Basic auth or Campaign Monitor's unusual Basic auth pattern, Drip's auth is straightforward and will be familiar if you have worked with other modern REST APIs. Store only the token and account ID in secrets. Do not store segment IDs, tag names, or event action names as secrets — these are not sensitive values and can be referenced directly in your Edge Function code or as parameters from your frontend.

Create the Edge Function that manages Drip subscribers and tracks e-commerce events. Drip's API v2 has two key endpoints for this integration: POST /v2/{account_id}/subscribers for creating or updating subscribers, and POST /v2/{account_id}/events for tracking custom events. The subscriber endpoint accepts email (required), first_name, last_name, tags (array of strings), and custom_fields (object with key-value pairs for any custom data you want to associate with the subscriber). Setting new_email to a new value updates the subscriber's email address. The API creates a new subscriber if the email does not exist, or updates the existing subscriber if it does. The event endpoint is how Drip integrations become more powerful than basic email marketing. Each event has an action (e.g., 'purchased', 'viewed_pricing', 'cart_abandoned'), optional properties (any key-value pairs you want to associate with the event), and optionally an occurred_at timestamp. Drip uses these events to enroll subscribers into workflows, update their score, and attribute revenue. The action name is how you configure Drip workflow triggers — a workflow set to trigger on 'purchased' will activate whenever your Edge Function fires an event with action: 'purchased'. The Edge Function below handles both subscriber creation and event tracking with a single action parameter, keeping your frontend code clean.

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 body = await req.json()
15    const { action } = body
16
17    const apiToken = Deno.env.get('DRIP_API_TOKEN')
18    const accountId = Deno.env.get('DRIP_ACCOUNT_ID')
19
20    if (!apiToken || !accountId) {
21      throw new Error('Missing required secrets: DRIP_API_TOKEN and DRIP_ACCOUNT_ID')
22    }
23
24    const headers = {
25      Authorization: `Bearer ${apiToken}`,
26      'Content-Type': 'application/json',
27    }
28    const baseUrl = `https://api.getdrip.com/v2/${accountId}`
29
30    if (action === 'create-subscriber') {
31      const { email, firstName = '', lastName = '', tags = [], customFields = {} } = body
32      if (!email) throw new Error('email is required for create-subscriber')
33
34      const payload = {
35        subscribers: [
36          {
37            email,
38            first_name: firstName,
39            last_name: lastName,
40            tags,
41            custom_fields: customFields,
42          },
43        ],
44      }
45
46      const res = await fetch(`${baseUrl}/subscribers`, {
47        method: 'POST',
48        headers,
49        body: JSON.stringify(payload),
50      })
51
52      const data = await res.json()
53      if (!res.ok) throw new Error(`Drip subscriber error: ${JSON.stringify(data)}`)
54
55      const subscriber = data.subscribers?.[0]
56      return new Response(
57        JSON.stringify({ success: true, id: subscriber?.id, email: subscriber?.email }),
58        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
59      )
60    }
61
62    if (action === 'track-event') {
63      const { email, eventAction, properties = {} } = body
64      if (!email || !eventAction) throw new Error('email and eventAction are required for track-event')
65
66      const payload = {
67        events: [
68          {
69            email,
70            action: eventAction,
71            properties,
72            occurred_at: new Date().toISOString(),
73          },
74        ],
75      }
76
77      const res = await fetch(`${baseUrl}/events`, {
78        method: 'POST',
79        headers,
80        body: JSON.stringify(payload),
81      })
82
83      // Drip events API returns 204 No Content on success
84      if (!res.ok) {
85        const data = await res.json().catch(() => ({}))
86        throw new Error(`Drip event error: ${JSON.stringify(data)}`)
87      }
88
89      return new Response(
90        JSON.stringify({ success: true, message: `Event '${eventAction}' tracked for ${email}` }),
91        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
92      )
93    }
94
95    throw new Error(`Unknown action: ${action}. Use 'create-subscriber' or 'track-event'.`)
96  } catch (error) {
97    return new Response(
98      JSON.stringify({ error: error.message }),
99      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
100    )
101  }
102})

Wire the Drip event tracking into your Lovable app's e-commerce flow. The most impactful integration point is after a successful payment — when a user completes a purchase via Stripe (or another payment processor), fire a 'purchased' event to Drip with the order details. This event is what Drip uses to attribute revenue to email campaigns and trigger post-purchase workflows. A good purchase event payload includes: the product name or ID, the purchase amount, the order or transaction ID (for deduplication — Drip can filter duplicate events by occurrence ID), and any tags that indicate the product category or customer tier. The properties object is flexible — include whatever data is valuable for segmentation in your Drip workflows. For cart abandonment, the integration point is detecting when a user leaves the checkout page without completing payment. In React, you can use a useEffect cleanup function or a beforeunload event listener to fire the cart_abandoned event when the user navigates away from an incomplete checkout. Be careful with debouncing — you only want to fire this event once per cart state, not every time the component renders. After wiring up these events, configure Drip workflows to respond to them: a 'purchased' trigger workflow for post-purchase sequences, and a 'cart_abandoned' trigger workflow for recovery emails. The Drip interface for building these workflows is visual and does not require any additional code changes in Lovable.

1import { supabase } from '@/lib/supabase'
2
3interface PurchaseEvent {
4  email: string
5  productName: string
6  amountCents: number
7  orderId: string
8}
9
10export const trackDripPurchase = async ({ email, productName, amountCents, orderId }: PurchaseEvent) => {
11  try {
12    // Ensure subscriber exists with 'customer' tag
13    await supabase.functions.invoke('drip-crm', {
14      body: {
15        action: 'create-subscriber',
16        email,
17        tags: ['customer'],
18        customFields: { last_purchase_amount: (amountCents / 100).toFixed(2) },
19      },
20    })
21
22    // Track the purchase event
23    await supabase.functions.invoke('drip-crm', {
24      body: {
25        action: 'track-event',
26        email,
27        eventAction: 'purchased',
28        properties: {
29          product_name: productName,
30          amount_cents: amountCents,
31          order_id: orderId,
32          currency: 'usd',
33        },
34      },
35    })
36  } catch (err) {
37    // Log but do not throw — purchase should succeed regardless of Drip tracking
38    console.error('Drip tracking failed:', err)
39  }
40}