How to Troubleshoot Common FlutterFlow Payments Problems

Open Stripe Dashboard > Developers > Logs. Every API call Stripe receives is listed here with status code, request body, and response. If your charge attempt does not appear at all, the problem is upstream — your Cloud Function never called Stripe, likely due to a CORS error or a function crash before the Stripe call. If it appears with a 402 or 400 error, read the error.code field in the response — it will be one of the strings listed below. Filter by your test API key (starts with sk_test) vs live key (sk_live) to make sure you are looking at the right environment.

If you see a CORS or network error in your Flutter debug console when tapping the pay button, you are calling the Stripe API directly from the app. Flutter (like a browser) cannot call stripe.com from client code with a secret key — and doing so would also expose your secret key in the app binary. The fix is to create a Firebase Cloud Function that accepts the charge parameters, calls Stripe server-side, and returns the result. In FlutterFlow, update your payment action to call the Cloud Function instead of Stripe directly. Pass only the amount and currency from the client; keep the secret key in the function's environment variables.

1// functions/createPaymentIntent.js
2const { onCall } = require('firebase-functions/v2/https');
3const Stripe = require('stripe');
4
5exports.createPaymentIntent = onCall(async (request) => {
6  const stripe = Stripe(process.env.STRIPE_SECRET_KEY);
7  const { amount, currency } = request.data;
8  const paymentIntent = await stripe.paymentIntents.create({
9    amount,       // in smallest currency unit, e.g. cents
10    currency,
11    automatic_payment_methods: { enabled: true },
12  });
13  return { clientSecret: paymentIntent.client_secret };
14});

One of the most common silent failures is using a test publishable key on the client but a live secret key in the Cloud Function, or vice versa. Stripe keys are environment-specific and cannot be mixed. Publishable keys start with pk_test_ or pk_live_; secret keys with sk_test_ or sk_live_. In FlutterFlow check your API call headers or custom action where you pass the publishable key. In Firebase Console check the Cloud Function's environment variable. Both must use the same prefix (test or live). Also verify that your Stripe webhook endpoint's signing secret matches the environment — Stripe issues separate webhook secrets for test and live mode.

If your Cloud Function receives the webhook event but returns a 400 error, open Firebase Functions logs and look for 'No signatures found matching the expected signature for payload' or 'Webhook signature verification failed.' This happens for three reasons: the wrong webhook signing secret is set in the function's environment, the request body has been parsed as JSON before verification (signature requires the raw bytes), or the timestamp is more than 5 minutes off (clock skew). Fix: ensure your Cloud Function reads the raw body using express.raw({ type: '*/*' }) before the verification step, and paste the correct webhook secret from Stripe Dashboard > Developers > Webhooks > your endpoint > Signing secret.

1// Correct webhook handler — preserve raw body
2const express = require('express');
3const { onRequest } = require('firebase-functions/v2/https');
4const Stripe = require('stripe');
5
6const app = express();
7app.post('/webhook', express.raw({ type: '*/*' }), (req, res) => {
8  const stripe = Stripe(process.env.STRIPE_SECRET_KEY);
9  const sig = req.headers['stripe-signature'];
10  let event;
11  try {
12    event = stripe.webhooks.constructEvent(
13      req.body, sig, process.env.STRIPE_WEBHOOK_SECRET
14    );
15  } catch (err) {
16    return res.status(400).send(`Webhook Error: ${err.message}`);
17  }
18  if (event.type === 'payment_intent.succeeded') {
19    // update Firestore order status
20  }
21  res.json({ received: true });
22});
23exports.stripeWebhook = onRequest(app);

If users are being charged twice, the likely cause is that your webhook handler processes payment_intent.succeeded events multiple times. Stripe can deliver the same event more than once if your endpoint returns a non-2xx status or times out. Fix this by making your handler idempotent: check whether the order has already been marked paid in Firestore before processing. Use the Stripe event ID as the Firestore document ID for processed events, and use a Firestore transaction to set status to 'paid' only if it is currently 'pending'. Also pass an idempotency key when creating the PaymentIntent so Stripe deduplicates server-side retries.

1// Idempotent webhook handler
2if (event.type === 'payment_intent.succeeded') {
3  const pi = event.data.object;
4  const db = getFirestore();
5  const eventRef = db.collection('processed_webhook_events').doc(event.id);
6  await db.runTransaction(async (t) => {
7    const eventDoc = await t.get(eventRef);
8    if (eventDoc.exists) return; // already processed
9    t.set(eventRef, { processedAt: FieldValue.serverTimestamp() });
10    const orderRef = db.collection('orders').doc(pi.metadata.orderId);
11    t.update(orderRef, { status: 'paid', paidAt: FieldValue.serverTimestamp() });
12  });
13}