How to Integrate Bolt.new with Coinbase API

For accepting cryptocurrency payments, start with Coinbase Commerce — it is separate from the main Coinbase exchange and designed specifically for merchants. Go to commerce.coinbase.com and sign up with your email address. You do not need an existing Coinbase exchange account; Commerce is a standalone service. Complete the merchant setup including your business name and optionally connecting a bank account for USD payouts (optional for getting started). Once logged in to Commerce, go to Settings > Security and scroll to 'API keys.' Click 'Create an API Key.' Coinbase generates a Commerce API key that looks like a UUID string. Copy it immediately — like most API keys, it is only shown once at creation. This key authenticates your server-side requests to create charges, list payments, and manage products. For the Coinbase Advanced Trade API (price data and portfolio), the setup is different. Go to portal.cdp.coinbase.com (Coinbase Developer Platform). Navigate to 'API Keys' and click 'Create API Key.' Advanced Trade API uses a newer JWT-based authentication system: you get an API Key Name (a string like 'organizations/{id}/apiKeys/{id}') and a private key (an EC private key in PEM format). Store both securely — the private key is used to sign JWT tokens for each request. For public market data (prices without account access), you do not need any API key at all and can call the public endpoints directly.

The `coinbase-commerce-node` package is the official Node.js SDK for Coinbase Commerce. It is a pure JavaScript library with no native binary dependencies — it installs and runs without issues in Bolt's WebContainer. Install it from the Bolt terminal: in Bolt's terminal panel, run `npm install coinbase-commerce-node`. The installation completes in a few seconds from the CDN-backed package cache. With the package installed, create a Next.js API route that generates Commerce charges. A charge is a payment request for a specific amount in a fiat currency (USD, EUR, etc.) that Coinbase Commerce converts to the equivalent crypto amount at the time of payment. The charge response includes a `hosted_url` — this is the Coinbase-hosted checkout page URL where you redirect the customer to complete payment. The charge creation payload includes the `name` (product or service name displayed on the checkout), `description`, `pricing_type` (always 'fixed_price' for a specific amount), and `local_price` with the amount and currency. Optionally include `redirect_url` (where Coinbase redirects after payment) and `cancel_url` (where Coinbase redirects if the user cancels). Both of these redirect URLs should be your deployed app URLs for production — during development you can use any URL since the redirect happens in the user's browser after they complete payment on Coinbase's hosted page. The Commerce SDK's `Charge.create()` method handles the HTTP request and response parsing. The result is a charge object with `id`, `code`, `hosted_url`, `expires_at`, and `addresses` (the crypto wallet addresses Coinbase generated for this payment).

1// app/api/crypto/commerce/route.ts
2import { NextResponse } from 'next/server';
3// @ts-ignore — coinbase-commerce-node types are legacy
4import { Client, resources } from 'coinbase-commerce-node';
5
6const { Charge } = resources;
7
8// Initialize Commerce client
9Client.init(process.env.COINBASE_COMMERCE_API_KEY || '');
10
11export async function POST(request: Request) {
12  try {
13    const { amount, currency = 'USD', productName, description } = await request.json();
14
15    if (!amount || !productName) {
16      return NextResponse.json(
17        { error: 'amount and productName are required' },
18        { status: 400 }
19      );
20    }
21
22    const chargeData = {
23      name: productName,
24      description: description || productName,
25      pricing_type: 'fixed_price',
26      local_price: {
27        amount: String(amount),
28        currency: currency,
29      },
30      // Redirect URLs for after payment — use your deployed URL in production
31      redirect_url: process.env.NEXT_PUBLIC_APP_URL
32        ? `${process.env.NEXT_PUBLIC_APP_URL}/payment/success`
33        : undefined,
34      cancel_url: process.env.NEXT_PUBLIC_APP_URL
35        ? `${process.env.NEXT_PUBLIC_APP_URL}/payment/cancelled`
36        : undefined,
37    };
38
39    const charge = await Charge.create(chargeData);
40
41    return NextResponse.json({
42      id: charge.id,
43      code: charge.code,
44      hosted_url: charge.hosted_url,
45      expires_at: charge.expires_at,
46      // Do not expose the full charge object — it contains sensitive wallet addresses
47    });
48  } catch (err) {
49    const message = err instanceof Error ? err.message : 'Charge creation failed';
50    return NextResponse.json({ error: message }, { status: 500 });
51  }
52}

Coinbase Advanced Trade API's public market data endpoints require no authentication. You can fetch current prices, 24-hour statistics, and order book data for any supported trading pair without an API key. This makes it straightforward to build public-facing price dashboards directly from API calls. The key endpoint is `GET https://api.coinbase.com/api/v3/brokerage/market/products/{product_id}` for individual product stats, or you can fetch multiple products at once. The response includes `price` (last trade price), `price_percentage_change_24h`, `volume_24h`, `high_52_week`, `low_52_week`, and more. Product IDs follow the format `{BASE}-{QUOTE}` — for Bitcoin priced in US dollars it is `BTC-USD`. For public endpoints, you can call the Advanced Trade API directly from a React component or from an API route. Using an API route is still recommended because it avoids potential CORS issues in different browser configurations and allows you to add caching. Implement a polling interval in the React component using `useEffect` with a `setInterval` — refresh every 30-60 seconds for live price data. Exponential backoff in error handling prevents hammering the API during outages. For authenticated endpoints (portfolio balances, order history), Advanced Trade API uses JWT authentication. Each request must include a JWT token signed with your EC private key, with a short expiration. The `@coinbase/coinbase-sdk` package handles this signing automatically. Authenticated requests must go through your API route — the private key must never appear in client-side code.

1// app/api/crypto/prices/route.ts
2import { NextResponse } from 'next/server';
3
4const PRODUCTS = ['BTC-USD', 'ETH-USD', 'SOL-USD', 'DOGE-USD', 'USDC-USD'];
5
6// Simple in-memory cache to reduce Coinbase API calls
7let priceCache: { data: unknown; timestamp: number } | null = null;
8const CACHE_TTL = 15_000; // 15 seconds
9
10export async function GET() {
11  if (priceCache && Date.now() - priceCache.timestamp < CACHE_TTL) {
12    return NextResponse.json(priceCache.data);
13  }
14
15  try {
16    const results = await Promise.all(
17      PRODUCTS.map(async (productId) => {
18        const res = await fetch(
19          `https://api.coinbase.com/api/v3/brokerage/market/products/${productId}`,
20          { headers: { 'Content-Type': 'application/json' } }
21        );
22        if (!res.ok) throw new Error(`Failed to fetch ${productId}`);
23        return res.json();
24      })
25    );
26
27    const prices = results.map((product) => ({
28      id: product.product_id,
29      price: parseFloat(product.price || '0'),
30      change24h: parseFloat(product.price_percentage_change_24h || '0'),
31      volume24h: parseFloat(product.volume_24h || '0'),
32      high52w: parseFloat(product.high_52_week || '0'),
33      low52w: parseFloat(product.low_52_week || '0'),
34    }));
35
36    priceCache = { data: { prices, updatedAt: new Date().toISOString() }, timestamp: Date.now() };
37    return NextResponse.json(priceCache.data);
38  } catch (err) {
39    const message = err instanceof Error ? err.message : 'Failed to fetch prices';
40    // Return stale cache on error if available
41    if (priceCache) return NextResponse.json(priceCache.data);
42    return NextResponse.json({ error: message }, { status: 500 });
43  }
44}

Add your Coinbase credentials to the `.env` file in your Bolt project root. The variable naming convention depends on which Coinbase products you are using. Commerce uses a single API key. Advanced Trade API authenticated calls require both an API key name and a private key — the private key is a multi-line PEM string which requires careful handling in environment variables. For Coinbase Advanced Trade private keys in .env, the PEM format contains newlines. When storing a PEM key in a single-line environment variable, replace the newline characters with `\n` literal characters — your server-side code then replaces them back when constructing the key. Alternatively, use Bolt Cloud's Secrets manager for multi-line values, which handles the encoding automatically. The `NEXT_PUBLIC_APP_URL` variable enables proper redirect URL configuration for Commerce charges. During development, this can be blank (redirects will use the Commerce page's default behavior). After deployment, set it to your Netlify URL so Commerce redirects users back to your app after payment.

1# .env
2# Coinbase Commerce (for accepting crypto payments)
3COINBASE_COMMERCE_API_KEY=your-commerce-api-key
4
5# Coinbase Advanced Trade API (for price data and portfolio — optional)
6COINBASE_API_KEY_NAME=organizations/your-org-id/apiKeys/your-key-id
7COINBASE_PRIVATE_KEY="-----BEGIN EC PRIVATE KEY-----\nYOUR_PRIVATE_KEY_HERE\n-----END EC PRIVATE KEY-----"
8
9# App URL for Commerce redirects (set to deployed URL in production)
10NEXT_PUBLIC_APP_URL=https://your-app.netlify.app

Coinbase Commerce webhooks are the mechanism by which your app learns that a payment has been confirmed. When a customer pays, Coinbase monitors the blockchain, waits for sufficient confirmations, and then sends a POST request to your webhook URL with a signed event payload. Without webhooks, your app has no reliable way to know that payment succeeded — you would have to poll the Commerce API repeatedly. Because Coinbase sends an incoming HTTP POST to your app, webhooks cannot be received in Bolt's WebContainer preview. The WebContainer has no way to accept incoming connections from the internet. Deploy your app to Netlify or Bolt Cloud first to get a stable HTTPS URL. After deployment, go to your Coinbase Commerce dashboard > Settings > Notifications. Click 'Add an endpoint' and enter your webhook URL (e.g., `https://your-app.netlify.app/api/crypto/webhook`). Coinbase generates a webhook signing secret — copy this and add it to your Netlify environment variables as `COINBASE_COMMERCE_WEBHOOK_SECRET`. Your webhook handler verifies this signature on every incoming event to confirm it genuinely came from Coinbase. The most important Commerce event is `charge:confirmed` — this fires when a payment has received enough blockchain confirmations to be considered final. Also handle `charge:failed` (payment not received before the 60-minute expiry), `charge:delayed` (payment received but under-confirmed — wait for confirmed event), and `charge:pending` (transaction broadcast but awaiting confirmations).

1// app/api/crypto/webhook/route.ts
2// IMPORTANT: This webhook handler requires a deployed URL.
3// Coinbase Commerce cannot send webhooks to Bolt's WebContainer preview URL.
4// Deploy to Netlify or Bolt Cloud, then register the deployed URL in Commerce Settings.
5import { NextResponse } from 'next/server';
6import crypto from 'crypto';
7
8export async function POST(request: Request) {
9  const rawBody = await request.text();
10  const signature = request.headers.get('X-CC-Webhook-Signature');
11  const secret = process.env.COINBASE_COMMERCE_WEBHOOK_SECRET;
12
13  if (!secret) {
14    console.error('COINBASE_COMMERCE_WEBHOOK_SECRET is not configured');
15    return NextResponse.json({ error: 'Webhook secret not configured' }, { status: 500 });
16  }
17
18  // Verify webhook signature
19  const expectedSignature = crypto
20    .createHmac('sha256', secret)
21    .update(rawBody)
22    .digest('hex');
23
24  if (signature !== expectedSignature) {
25    console.error('Invalid Commerce webhook signature');
26    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
27  }
28
29  const event = JSON.parse(rawBody);
30  const { type, data } = event;
31  const chargeCode = data?.object?.code;
32
33  console.log(`Commerce webhook: ${type} for charge ${chargeCode}`);
34
35  switch (type) {
36    case 'charge:confirmed':
37      // Payment confirmed — fulfill the order
38      // e.g., update your database, send confirmation email, grant access
39      console.log(`Payment confirmed for charge ${chargeCode}`);
40      break;
41    case 'charge:failed':
42      // Payment failed or expired — handle appropriately
43      console.log(`Charge failed: ${chargeCode}`);
44      break;
45    case 'charge:pending':
46      // Transaction broadcast, awaiting confirmations
47      console.log(`Charge pending: ${chargeCode}`);
48      break;
49    case 'charge:delayed':
50      // Payment received after expiry — manual review needed
51      console.log(`Delayed payment for charge: ${chargeCode}`);
52      break;
53  }
54
55  // Always return 200 quickly — Coinbase will retry on non-200 responses
56  return NextResponse.json({ received: true });
57}