How to Build Payment gateway integration with V0

1// Paste this prompt into V0's AI chat:
2// Build a payment gateway integration. Create a Supabase schema:
3// 1. payments: id (uuid PK), user_id (uuid FK to auth.users), amount (int — in cents), currency (text DEFAULT 'usd'), provider (text CHECK IN 'stripe','paypal'), provider_payment_id (text UNIQUE), status (text DEFAULT 'pending' CHECK IN 'pending','processing','succeeded','failed','refunded'), metadata (jsonb DEFAULT '{}'), created_at (timestamptz DEFAULT now())
4// 2. payment_methods: id (uuid PK), user_id (uuid FK to auth.users), provider (text), provider_method_id (text), last_four (text), is_default (boolean DEFAULT false), created_at (timestamptz)
5// 3. refunds: id (uuid PK), payment_id (uuid FK to payments), amount (int), reason (text), status (text DEFAULT 'pending' CHECK IN 'pending','succeeded','failed'), provider_refund_id (text), created_at (timestamptz)
6// The UNIQUE constraint on provider_payment_id prevents duplicate webhook processing.
7// Add RLS so users see only their own payments. Generate SQL and types.

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const { amount, currency, provider, user_id, metadata } = await req.json()
13
14  if (!amount || amount < 50) {
15    return NextResponse.json(
16      { error: 'Amount must be at least 50 cents' },
17      { status: 400 }
18    )
19  }
20
21  const { data: payment, error: dbError } = await supabase
22    .from('payments')
23    .insert({
24      user_id,
25      amount,
26      currency: currency || 'usd',
27      provider,
28      status: 'processing',
29      metadata: metadata || {},
30    })
31    .select('id')
32    .single()
33
34  if (dbError) {
35    return NextResponse.json({ error: dbError.message }, { status: 500 })
36  }
37
38  if (provider === 'stripe') {
39    const intent = await stripe.paymentIntents.create({
40      amount,
41      currency: currency || 'usd',
42      metadata: { payment_id: payment.id, user_id },
43    })
44
45    await supabase
46      .from('payments')
47      .update({ provider_payment_id: intent.id })
48      .eq('id', payment.id)
49
50    return NextResponse.json({
51      client_secret: intent.client_secret,
52      payment_id: payment.id,
53    })
54  }
55
56  if (provider === 'paypal') {
57    const auth = Buffer.from(
58      `${process.env.PAYPAL_CLIENT_ID}:${process.env.PAYPAL_SECRET}`
59    ).toString('base64')
60
61    const tokenRes = await fetch(
62      'https://api-m.sandbox.paypal.com/v1/oauth2/token',
63      {
64        method: 'POST',
65        headers: {
66          Authorization: `Basic ${auth}`,
67          'Content-Type': 'application/x-www-form-urlencoded',
68        },
69        body: 'grant_type=client_credentials',
70      }
71    )
72    const { access_token } = await tokenRes.json()
73
74    const orderRes = await fetch(
75      'https://api-m.sandbox.paypal.com/v2/checkout/orders',
76      {
77        method: 'POST',
78        headers: {
79          Authorization: `Bearer ${access_token}`,
80          'Content-Type': 'application/json',
81        },
82        body: JSON.stringify({
83          intent: 'CAPTURE',
84          purchase_units: [{
85            amount: {
86              currency_code: (currency || 'usd').toUpperCase(),
87              value: (amount / 100).toFixed(2),
88            },
89          }],
90        }),
91      }
92    )
93    const order = await orderRes.json()
94
95    await supabase
96      .from('payments')
97      .update({ provider_payment_id: order.id })
98      .eq('id', payment.id)
99
100    return NextResponse.json({
101      order_id: order.id,
102      payment_id: payment.id,
103    })
104  }
105
106  return NextResponse.json({ error: 'Invalid provider' }, { status: 400 })
107}

1import { NextRequest, NextResponse } from 'next/server'
2import Stripe from 'stripe'
3import { createClient } from '@supabase/supabase-js'
4
5const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
6const supabase = createClient(
7  process.env.SUPABASE_URL!,
8  process.env.SUPABASE_SERVICE_ROLE_KEY!
9)
10
11export async function POST(req: NextRequest) {
12  const rawBody = await req.text()
13  const sig = req.headers.get('stripe-signature')!
14
15  let event: Stripe.Event
16  try {
17    event = stripe.webhooks.constructEvent(
18      rawBody, sig, process.env.STRIPE_WEBHOOK_SECRET!
19    )
20  } catch {
21    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 })
22  }
23
24  if (event.type === 'payment_intent.succeeded') {
25    const intent = event.data.object as Stripe.PaymentIntent
26
27    const { data: existing } = await supabase
28      .from('payments')
29      .select('id, status')
30      .eq('provider_payment_id', intent.id)
31      .single()
32
33    if (existing?.status === 'succeeded') {
34      return NextResponse.json({ received: true, duplicate: true })
35    }
36
37    if (existing) {
38      await supabase
39        .from('payments')
40        .update({ status: 'succeeded' })
41        .eq('id', existing.id)
42    }
43  }
44
45  if (event.type === 'payment_intent.payment_failed') {
46    const intent = event.data.object as Stripe.PaymentIntent
47
48    await supabase
49      .from('payments')
50      .update({ status: 'failed' })
51      .eq('provider_payment_id', intent.id)
52  }
53
54  return NextResponse.json({ received: true })
55}

1// Paste this prompt into V0's AI chat:
2// Create payment pages:
3// 1. app/checkout/page.tsx — 'use client' checkout form:
4//    - RadioGroup for provider selection: Stripe (credit card icon) or PayPal (PayPal icon)
5//    - For Stripe: embed Stripe Elements CardElement for card input
6//    - For PayPal: show PayPal button that redirects to PayPal checkout
7//    - Amount display, currency Select, 'Pay Now' Button with loading state
8//    - On submit: POST to /api/payments/create-intent, then confirm with Stripe.js or redirect to PayPal
9// 2. app/payments/page.tsx — transaction history Table: date, amount, provider Badge (stripe=purple, paypal=blue), status Badge (succeeded=green, pending=yellow, failed=red, refunded=gray), actions DropdownMenu.
10//    - 'Refund' in DropdownMenu opens AlertDialog with reason Textarea and amount Input (partial refund support). Server Action calls Stripe Refunds API or PayPal Refund API.
11// 3. app/payments/[id]/page.tsx — payment detail Card: full metadata, timeline of status changes, refund history if any.
12// Use shadcn/ui RadioGroup, Card, Badge, Table, AlertDialog, DropdownMenu, Input, Button, Separator.