How to Integrate Coinbase API with V0

Open your V0 project and prompt V0 to generate the payment interface. For a Coinbase Commerce integration, your UI needs a product display section, a price display in USD (Coinbase Commerce converts to crypto automatically), and a payment button that triggers the charge creation flow. You can also include a list of accepted cryptocurrencies with their logos to signal to customers that crypto is accepted. Ask V0 to generate a component that calls /api/coinbase/create-charge on button click and handles the redirect to the returned hosted_url. The component should also handle loading states (while the API creates the charge) and error states (if charge creation fails). Consider adding a 'Payment Status' route that customers land on after completing the Coinbase checkout. V0 will generate functional React code using placeholder data. The buttons will not work until the API route is created, but you can verify the layout and styling match your requirements. Request shadcn/ui components for a polished look that integrates with V0's default design system.

Create a new file at app/api/coinbase/route.ts. This route handles POST requests from your frontend to create a new Coinbase Commerce charge. A charge is a payment request with a specific amount, currency, and metadata. Coinbase Commerce returns a hosted checkout URL that you redirect the customer to. The Coinbase Commerce REST API is straightforward. To create a charge, send a POST request to https://api.commerce.coinbase.com/charges with your API key in the X-CC-Api-Key header and the charge details in the JSON body. The required fields are name (product name), description, pricing_type (fixed_price or no_price), and local_price (amount and currency for fixed_price charges). You can also include metadata (order ID, user ID) that Coinbase will include in webhook events for matching payments to orders. The response includes a data.hosted_url (the Coinbase-hosted checkout page) and a data.id (the charge ID for webhook matching). Return both to the frontend so it can redirect and track the payment. Always store the charge ID in your database or session before redirecting, since you will need it to match incoming webhook events to orders.

1import { NextRequest, NextResponse } from 'next/server';
2
3interface CreateChargeRequest {
4  name: string;
5  description: string;
6  amount: string;
7  currency: string;
8  metadata?: Record<string, string>;
9}
10
11export async function POST(request: NextRequest) {
12  const body: CreateChargeRequest = await request.json();
13
14  const apiKey = process.env.COINBASE_COMMERCE_API_KEY;
15  if (!apiKey) {
16    return NextResponse.json(
17      { error: 'Coinbase Commerce API key not configured' },
18      { status: 500 }
19    );
20  }
21
22  try {
23    const response = await fetch('https://api.commerce.coinbase.com/charges', {
24      method: 'POST',
25      headers: {
26        'X-CC-Api-Key': apiKey,
27        'X-CC-Version': '2018-03-22',
28        'Content-Type': 'application/json',
29      },
30      body: JSON.stringify({
31        name: body.name,
32        description: body.description,
33        pricing_type: 'fixed_price',
34        local_price: {
35          amount: body.amount,
36          currency: body.currency || 'USD',
37        },
38        metadata: body.metadata || {},
39      }),
40    });
41
42    if (!response.ok) {
43      const error = await response.json();
44      return NextResponse.json(
45        { error: error.error?.message || 'Failed to create charge' },
46        { status: response.status }
47      );
48    }
49
50    const data = await response.json();
51    return NextResponse.json({
52      chargeId: data.data.id,
53      checkoutUrl: data.data.hosted_url,
54      expiresAt: data.data.expires_at,
55    });
56  } catch (error) {
57    console.error('Coinbase Commerce error:', error);
58    return NextResponse.json(
59      { error: 'Failed to create payment charge' },
60      { status: 500 }
61    );
62  }
63}

Your Coinbase Commerce API key must be stored as a Vercel environment variable. Go to your Vercel Dashboard, select your project, click Settings → Environment Variables, and add a new variable named COINBASE_COMMERCE_API_KEY. Paste your API key as the value. Select All Environments unless you want separate test and production keys. To find or create your API key: log in to commerce.coinbase.com, go to Settings → API Keys, and either copy your existing key or click Create an API Key. The API key is a long alphanumeric string. Keep this key private — anyone with it can create charges on your behalf and access your Commerce account data. For webhook signature verification, also add COINBASE_COMMERCE_WEBHOOK_SECRET. You will get this secret when you configure the webhook endpoint in the Coinbase Commerce dashboard (Settings → Webhook Subscriptions → Add an endpoint). The webhook secret is used to verify that incoming webhook requests actually originate from Coinbase Commerce. After adding both variables, trigger a new deployment in Vercel by clicking Redeploy on the latest deployment, or push a commit from V0.

Crypto payments need an asynchronous confirmation flow. When a customer completes a Coinbase Commerce checkout, Coinbase monitors the blockchain for the transaction. Once confirmed, Coinbase POSTs a webhook event to your registered endpoint. You must handle this webhook to update order status, grant access to purchased content, or trigger any post-payment business logic. Create a webhook handler at app/api/coinbase/webhook/route.ts. The critical requirement for Coinbase Commerce webhooks is that you use the raw request body (request.text() not request.json()) for signature verification. Coinbase signs the webhook payload using HMAC-SHA256 with your webhook secret, and the signature is sent in the X-CC-Webhook-Signature header. Verifying this signature is essential to prevent fraud — without it, anyone could POST fake payment confirmations to your endpoint. The key webhook events to handle are: charge:confirmed (payment confirmed on blockchain — fulfill the order), charge:failed (payment failed or expired after 60 minutes — notify customer), and charge:pending (payment detected on blockchain but not yet confirmed — can show a pending status). Always return a 200 response immediately after receiving and queuing the event for processing.

1import { NextRequest, NextResponse } from 'next/server';
2import crypto from 'crypto';
3
4export async function POST(request: NextRequest) {
5  const body = await request.text();
6  const signature = request.headers.get('x-cc-webhook-signature');
7  const webhookSecret = process.env.COINBASE_COMMERCE_WEBHOOK_SECRET;
8
9  if (!signature || !webhookSecret) {
10    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
11  }
12
13  // Verify webhook signature
14  const expectedSig = crypto
15    .createHmac('sha256', webhookSecret)
16    .update(body)
17    .digest('hex');
18
19  if (expectedSig !== signature) {
20    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
21  }
22
23  const event = JSON.parse(body);
24  const charge = event.event.data;
25  const chargeId = charge.id;
26  const orderId = charge.metadata?.orderId;
27
28  switch (event.event.type) {
29    case 'charge:confirmed':
30      console.log(`Payment confirmed for charge ${chargeId}, order ${orderId}`);
31      // Update database: mark order as paid
32      // Send confirmation email
33      break;
34    case 'charge:failed':
35      console.log(`Payment failed for charge ${chargeId}`);
36      // Update database: mark order as failed
37      break;
38    case 'charge:pending':
39      console.log(`Payment pending for charge ${chargeId}`);
40      // Update database: mark as pending confirmation
41      break;
42    default:
43      console.log(`Unhandled event type: ${event.event.type}`);
44  }
45
46  return NextResponse.json({ received: true });
47}