How to Integrate Cryptocurrency Payments in FlutterFlow

Sign up at commerce.coinbase.com. After account setup, go to Settings → Security. Generate a new API Key — copy it securely, you will only see it once. Also copy the Webhook Secret displayed on the same page — this is used to verify that webhook requests actually come from Coinbase and not a third party. In Firebase Secret Manager (Google Cloud Console → Secret Manager), create two secrets: COINBASE_COMMERCE_API_KEY and COINBASE_COMMERCE_WEBHOOK_SECRET. Store the respective values. Never put these in FlutterFlow code or API Manager headers. Back in Coinbase Commerce, go to Settings → Notifications and add your webhook endpoint URL — you will create this Cloud Function in Step 3 and add the URL here. The webhook URL format will be: https://us-central1-your-project.cloudfunctions.net/coinbaseWebhook.

Create an HTTPS Cloud Function named createCryptoCharge. It receives a POST request from FlutterFlow with amount, currency (USD), productName, orderId, and userId. Using the Coinbase Commerce API, call POST https://api.commerce.coinbase.com/charges with headers X-CC-Api-Key and X-CC-Version: 2018-03-22. The request body includes name (product name), description, pricing_type: fixed_price, local_price: {amount, currency: USD}, and metadata: {orderId, userId}. The API returns a charge object with a hosted_url — return this URL to FlutterFlow. Also write an order document to Firestore: orders/{orderId} with status 'pending_payment', chargeCode, chargeId, amount, userId, createdAt. FlutterFlow will then launch the hosted_url using the Launch URL action.

1const functions = require('firebase-functions');
2const { defineSecret } = require('firebase-functions/params');
3const admin = require('firebase-admin');
4const axios = require('axios');
5
6if (!admin.apps.length) admin.initializeApp();
7const ccApiKey = defineSecret('COINBASE_COMMERCE_API_KEY');
8
9exports.createCryptoCharge = functions
10  .runWith({ secrets: ['COINBASE_COMMERCE_API_KEY'] })
11  .https.onCall(async (data, context) => {
12    if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
13
14    const { amount, productName, orderId } = data;
15    const response = await axios.post(
16      'https://api.commerce.coinbase.com/charges',
17      {
18        name: productName,
19        description: `Payment for ${productName}`,
20        pricing_type: 'fixed_price',
21        local_price: { amount: String(amount), currency: 'USD' },
22        metadata: { orderId, userId: context.auth.uid }
23      },
24      {
25        headers: {
26          'X-CC-Api-Key': ccApiKey.value(),
27          'X-CC-Version': '2018-03-22',
28          'Content-Type': 'application/json'
29        }
30      }
31    );
32
33    const charge = response.data.data;
34    await admin.firestore().collection('orders').doc(orderId).set({
35      chargeCode: charge.code,
36      chargeId: charge.id,
37      hostedUrl: charge.hosted_url,
38      status: 'pending_payment',
39      amount,
40      userId: context.auth.uid,
41      createdAt: admin.firestore.FieldValue.serverTimestamp()
42    }, { merge: true });
43
44    return { hostedUrl: charge.hosted_url, chargeCode: charge.code };
45  });

On your checkout or product page in FlutterFlow, add a Pay with Crypto button (use a Bitcoin or wallet icon from the icon library). In the button's Action Flow: first call the createCryptoCharge Cloud Function (Backend Call → Cloud Function → createCryptoCharge) with the amount from page state and a generated orderId (use the current timestamp as a simple unique ID). Store the returned hostedUrl in a Page State variable cryptoCheckoutUrl. Then add a Launch URL action using the cryptoCheckoutUrl variable. On the device, this opens Coinbase's hosted checkout page in the device's default browser. The hosted page shows a payment address and QR code for the user to send cryptocurrency. After payment, Coinbase redirects back to your app using the redirect_url if you configure one in the charge creation request.

Create a second Cloud Function named coinbaseWebhook as an HTTP trigger. This function receives POST requests from Coinbase when payment status changes. Coinbase sends events: charge:pending (transaction detected on blockchain), charge:confirmed (enough confirmations, payment complete), charge:failed (transaction failed or expired). In the webhook function, verify the request signature: compute HMAC-SHA256 of the raw request body using the COINBASE_COMMERCE_WEBHOOK_SECRET, compare to the X-CC-Webhook-Signature header. If signatures don't match, return 400. If the event type is charge:confirmed, update the Firestore order: set status to 'paid', add txHash (from event.data.payments[0].transaction_id), network, and confirmedAt. If charge:failed, set status to 'payment_failed'.

1const functions = require('firebase-functions');
2const { defineSecret } = require('firebase-functions/params');
3const admin = require('firebase-admin');
4const crypto = require('crypto');
5
6const webhookSecret = defineSecret('COINBASE_COMMERCE_WEBHOOK_SECRET');
7
8exports.coinbaseWebhook = functions
9  .runWith({ secrets: ['COINBASE_COMMERCE_WEBHOOK_SECRET'] })
10  .https.onRequest(async (req, res) => {
11    const signature = req.headers['x-cc-webhook-signature'];
12    const rawBody = req.rawBody;
13    const expected = crypto
14      .createHmac('sha256', webhookSecret.value())
15      .update(rawBody)
16      .digest('hex');
17
18    if (signature !== expected) {
19      return res.status(400).send('Invalid signature');
20    }
21
22    const event = req.body;
23    const orderId = event.data?.metadata?.orderId;
24
25    if (event.type === 'charge:confirmed' && orderId) {
26      const payment = event.data.payments?.[0];
27      await admin.firestore().collection('orders').doc(orderId).update({
28        status: 'paid',
29        txHash: payment?.transaction_id || null,
30        network: payment?.network || null,
31        confirmedAt: admin.firestore.FieldValue.serverTimestamp()
32      });
33    } else if (event.type === 'charge:failed' && orderId) {
34      await admin.firestore().collection('orders').doc(orderId).update({
35        status: 'payment_failed'
36      });
37    }
38    return res.status(200).send('OK');
39  });

In FlutterFlow, add a payment status page or modal that shows real-time order status. Add a Backend Query (real-time listener) on the orders/{orderId} document. Display status conditionally: if status is 'pending_payment', show a CircularProgressIndicator with text 'Waiting for payment...'. If status is 'paid', show a green checkmark, the transaction hash truncated (first 8 + last 8 characters), and a Launch URL button that opens the blockchain explorer: for Ethereum mainnet, the URL is https://etherscan.io/tx/{txHash}; for Bitcoin, https://www.blockchain.com/btc/tx/{txHash}. If status is 'payment_failed', show a red error state with a Retry button that creates a new charge. The real-time listener updates the UI within 1-3 seconds of the webhook firing.