How to Integrate Lovable with Coinbase Commerce API

Go to commerce.coinbase.com and create a Coinbase Commerce account (separate from Coinbase Exchange — you don't need to hold crypto or have an exchange account). After email verification, you can immediately accept payments. In your Commerce dashboard, navigate to Settings → Security. Click 'Create an API key'. Give it a name like 'Lovable App' and copy the API key — it's shown only once. This key is used in the Authorization header as 'Bearer {apikey}' for all Commerce API requests. Still in Settings → Security, scroll down to 'Webhook subscriptions'. Click 'Add an endpoint' and enter your webhook URL: https://your-project.supabase.co/functions/v1/coinbase-webhooks (your Edge Function URL). Select the events you want to receive: charge:created, charge:confirmed, charge:failed, charge:delayed, charge:pending, charge:resolved. Coinbase provides a webhook signing secret for each endpoint — copy this secret for webhook verification. Coinbase Commerce has no sandbox mode — all charges are real and must be paid with real crypto. For testing, create small charges (e.g., $0.01 USD) and pay them with a small crypto amount. Alternatively, use Coinbase Commerce's 'dummy' payment feature in the dashboard that simulates payment without actual crypto transaction for development testing.

Open your Lovable project, click '+', select 'Cloud', and expand Secrets. Add COINBASE_COMMERCE_API_KEY with your Commerce API key. Add COINBASE_COMMERCE_WEBHOOK_SECRET with the signing secret for your webhook endpoint. Add COINBASE_COMMERCE_API_BASE with 'https://api.commerce.coinbase.com'. The API key grants full access to your Commerce account including creating charges, listing them, and canceling them. If compromised, someone could create fraudulent charges or access your payment history. Store it exclusively in Cloud Secrets. The webhook secret is used to verify that incoming webhook requests are genuinely from Coinbase Commerce and not spoofed by a malicious actor sending fake payment confirmations. Without signature verification, someone could send a fake 'payment confirmed' webhook and trigger your fulfillment logic without actually paying. Always verify signatures before processing webhook events — Lovable's security model blocks approximately 1,200 API key exposures daily, but application-level signature verification is your responsibility.

Create the Edge Function that generates Coinbase Commerce payment charges. A charge is the central concept in Commerce: it represents a payment request for a specific amount. Each charge gets a unique ID, a hosted checkout URL, and payment addresses for each supported cryptocurrency. The charge creation request requires: name (what the buyer is purchasing), description (more detail), pricing_type ('fixed_price' for a specific amount or 'no_price' for open-ended), price object (amount and currency for fixed_price), and optional metadata (your order ID, user ID, etc. — sent back in webhooks). Coinbase Commerce supports pricing in major fiat currencies (USD, EUR, GBP, etc.) and stablecoins (USDC). For a fixed price item, set pricing_type='fixed_price' and price={amount: '29.99', currency: 'USD'}. Coinbase converts this to the equivalent crypto amount at the current exchange rate. After creating the charge, your Edge Function returns the charge ID and hosted_url. Store the charge ID in your database immediately so you can match incoming webhook events to the correct order. Redirect the user to hosted_url for the payment experience.

1// supabase/functions/coinbase-commerce/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";
4
5const API_KEY = Deno.env.get("COINBASE_COMMERCE_API_KEY") ?? "";
6const API_BASE = Deno.env.get("COINBASE_COMMERCE_API_BASE") ?? "https://api.commerce.coinbase.com";
7const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
8
9serve(async (req) => {
10  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
11  const supabase = createClient(Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "");
12
13  try {
14    const body = await req.json();
15    const { action } = body;
16
17    if (action === "create-charge") {
18      const { name, description, amount_usd, user_id, order_id } = body;
19      const res = await fetch(`${API_BASE}/charges`, {
20        method: "POST",
21        headers: { "Authorization": `Bearer ${API_KEY}`, "Content-Type": "application/json", "X-CC-Version": "2018-03-22" },
22        body: JSON.stringify({
23          name,
24          description,
25          pricing_type: "fixed_price",
26          local_price: { amount: amount_usd.toString(), currency: "USD" },
27          metadata: { user_id, order_id },
28        }),
29      });
30      const data = await res.json();
31      if (!data.data?.code) throw new Error(data.error?.message ?? "Charge creation failed");
32      const charge = data.data;
33
34      await supabase.from("crypto_orders").insert({
35        charge_id: charge.code,
36        order_id,
37        user_id,
38        amount_usd,
39        status: "NEW",
40        hosted_url: charge.hosted_url,
41        created_at: new Date().toISOString(),
42      });
43
44      return new Response(JSON.stringify({ charge_id: charge.code, hosted_url: charge.hosted_url, expires_at: charge.expires_at }), {
45        headers: { ...corsHeaders, "Content-Type": "application/json" },
46      });
47    }
48
49    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
50  } catch (err) {
51    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
52  }
53});

Create a separate Edge Function that receives and processes Coinbase Commerce webhooks. The webhook receiver must be at the URL you registered with Coinbase, and it must verify the signature on every incoming request before processing payment events. Coinbase Commerce signs webhooks using HMAC-SHA256 with your webhook secret as the key and the raw request body as the message. The signature is included in the X-CC-Webhook-Signature header. Compute the expected signature and compare it to the header value before trusting the event data. Key Coinbase Commerce webhook events: charge:created (charge was created — usually from your app), charge:pending (partial payment received — user sent some but not full amount), charge:confirmed (full payment received and confirmed on blockchain — trigger fulfillment), charge:failed (charge expired without payment), charge:delayed (payment received but delayed blockchain confirmation), charge:resolved (charge resolved — could be paid or cancelled). For most use cases, you need to handle charge:confirmed (update order status to paid, trigger fulfillment) and charge:failed (update order status to expired). Store all webhook events in a Supabase webhook_events table for audit purposes before processing — this lets you replay events if your processing logic has a bug.

1// supabase/functions/coinbase-webhooks/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";
4
5const WEBHOOK_SECRET = Deno.env.get("COINBASE_COMMERCE_WEBHOOK_SECRET") ?? "";
6
7serve(async (req) => {
8  const supabase = createClient(Deno.env.get("SUPABASE_URL") ?? "", Deno.env.get("SUPABASE_SERVICE_ROLE_KEY") ?? "");
9  const rawBody = await req.text();
10  const signature = req.headers.get("X-CC-Webhook-Signature") ?? "";
11
12  // Verify signature
13  const key = await crypto.subtle.importKey("raw", new TextEncoder().encode(WEBHOOK_SECRET), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
14  const expectedSig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(rawBody));
15  const expectedHex = Array.from(new Uint8Array(expectedSig)).map(b => b.toString(16).padStart(2, "0")).join("");
16
17  if (expectedHex !== signature) {
18    console.error("Webhook signature mismatch");
19    return new Response("Unauthorized", { status: 401 });
20  }
21
22  const event = JSON.parse(rawBody);
23  const chargeCode = event.data?.code;
24  const eventType = event.type;
25
26  // Log the event
27  await supabase.from("webhook_events").insert({ event_type: eventType, charge_id: chargeCode, payload: event, received_at: new Date().toISOString() });
28
29  if (eventType === "charge:confirmed" && chargeCode) {
30    await supabase.from("crypto_orders").update({ status: "CONFIRMED", confirmed_at: new Date().toISOString() }).eq("charge_id", chargeCode);
31  } else if (eventType === "charge:failed" && chargeCode) {
32    await supabase.from("crypto_orders").update({ status: "FAILED" }).eq("charge_id", chargeCode);
33  }
34
35  return new Response("OK", { status: 200 });
36});