How to Build a Payment Gateway Integration with Lovable

1Create a Stripe payment integration with this Supabase schema:
2
3Tables:
4- products: id (uuid pk), name (text), description (text), price_cents (int), currency (text default 'usd'), stripe_price_id (text), is_active (bool default true), created_at
5- customers: id (uuid pk), user_id (references auth.users), email (text), stripe_customer_id (text unique), created_at
6- payments: id (uuid pk), user_id (references auth.users), customer_id (uuid references customers), product_id (uuid references products), stripe_payment_intent_id (text unique), amount (int), currency (text), status (text default 'pending'), metadata (jsonb default '{}'), created_at, updated_at
7
8RLS policies:
9- products: public SELECT for is_active=true, authenticated INSERT/UPDATE for admin role
10- customers: users can SELECT/UPDATE their own record (user_id = auth.uid())
11- payments: users can SELECT their own payments (user_id = auth.uid())
12
13Generate TypeScript types for all tables.

1Create a Supabase Edge Function at supabase/functions/create-payment-intent/index.ts.
2
3The function should:
41. Parse the request body: { productId: string, customerEmail: string }
52. Look up the product in Supabase to get price_cents and name
63. Look up or create a Stripe customer using STRIPE_SECRET_KEY from Deno.env
74. Create a Stripe PaymentIntent with amount = product.price_cents, currency = product.currency, customer = stripeCustomerId, metadata = { productId }
85. Insert a row into the payments table with status = 'pending' and stripe_payment_intent_id = paymentIntent.id
96. Return { clientSecret: paymentIntent.client_secret }
10
11Include CORS headers and OPTIONS handler. Use the Stripe API via fetch to https://api.stripe.com/v1/payment_intents with Basic Auth (secret key as username, empty password).
12
13Also upsert the customer into the customers table with stripe_customer_id.

1Build a product catalog page at src/pages/Products.tsx.
2
3Requirements:
4- Fetch all is_active products from Supabase
5- Display each as a shadcn/ui Card with: name, description, price formatted as currency, and a 'Buy Now' Button
6- Clicking Buy Now opens a Dialog
7- Inside the Dialog:
8  1. Call the create-payment-intent Edge Function to get a clientSecret
9  2. Show a loading Skeleton while the Edge Function responds
10  3. Once clientSecret arrives, render a Stripe Elements form using loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY) and <Elements stripe={stripePromise} options={{ clientSecret }}>
11  4. Inside Elements, render a <PaymentElement /> component for the card form
12  5. Add a 'Pay' Button that calls stripe.confirmPayment with return_url pointing to /payment-success
13- Install @stripe/react-stripe-js and @stripe/stripe-js via the package manager
14- Handle loading, error, and success states with appropriate shadcn/ui Alert components

1// supabase/functions/stripe-webhook/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
4import Stripe from 'https://esm.sh/stripe@14?target=deno'
5
6const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY') ?? '', {
7  apiVersion: '2023-10-16',
8  httpClient: Stripe.createFetchHttpClient(),
9})
10
11const cryptoProvider = Stripe.createSubtleCryptoProvider()
12
13serve(async (req: Request) => {
14  if (req.method !== 'POST') {
15    return new Response('Method not allowed', { status: 405 })
16  }
17
18  const body = await req.text()
19  const signature = req.headers.get('stripe-signature') ?? ''
20  const webhookSecret = Deno.env.get('STRIPE_WEBHOOK_SECRET') ?? ''
21
22  let event: Stripe.Event
23  try {
24    event = await stripe.webhooks.constructEventAsync(
25      body,
26      signature,
27      webhookSecret,
28      undefined,
29      cryptoProvider
30    )
31  } catch (err) {
32    const msg = err instanceof Error ? err.message : 'Webhook signature failed'
33    console.error('Webhook verification failed:', msg)
34    return new Response(JSON.stringify({ error: msg }), { status: 400 })
35  }
36
37  const supabase = createClient(
38    Deno.env.get('SUPABASE_URL') ?? '',
39    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
40  )
41
42  if (event.type === 'payment_intent.succeeded') {
43    const pi = event.data.object as Stripe.PaymentIntent
44    await supabase
45      .from('payments')
46      .update({ status: 'succeeded', updated_at: new Date().toISOString() })
47      .eq('stripe_payment_intent_id', pi.id)
48  }
49
50  if (event.type === 'payment_intent.payment_failed') {
51    const pi = event.data.object as Stripe.PaymentIntent
52    await supabase
53      .from('payments')
54      .update({ status: 'failed', updated_at: new Date().toISOString() })
55      .eq('stripe_payment_intent_id', pi.id)
56  }
57
58  return new Response(JSON.stringify({ received: true }), { status: 200 })
59})

1Build a payment history page at src/pages/Payments.tsx.
2
3Requirements:
4- Fetch the current user's payments from Supabase joined with products (to show product name)
5- Render as a shadcn/ui DataTable with columns: date (formatted), product name, amount (currency formatted), status (Badge: succeeded=green, pending=yellow, failed=red), Stripe ID (truncated monospace)
6- Add a date range Popover filter (last 7 days / last 30 days / all time)
7- Add a status Select filter (all / succeeded / pending / failed)
8- Above the table, show three summary Cards: Total Revenue (sum of succeeded), Pending Amount, Failed Transactions count
9- Add a BarChart using Recharts showing daily revenue for the last 30 days, grouped by date
10- Show an empty state illustration with 'No payments yet' when the table is empty