How to Create a Custom Payment Widget for Your FlutterFlow App

In your Cloud Function environment (Firebase or Supabase), add STRIPE_SECRET_KEY as an environment variable with your test mode secret key (sk_test_...). Never put this key in FlutterFlow API headers, Custom Code, or anywhere in client-side code. Also add STRIPE_WEBHOOK_SECRET for webhook signature verification. The publishable key (pk_test_...) can be used client-side if needed for Stripe Elements, but we use Checkout which does not need it.

Write a Cloud Function (HTTP triggered) that receives cart items (array of name, price, quantity) and userId. The function creates a Stripe Checkout Session: stripe.checkout.sessions.create({ line_items: cartItems.map(item => ({price_data: {currency: 'usd', product_data: {name: item.name}, unit_amount: item.price * 100}, quantity: item.quantity})), mode: 'payment', success_url: 'https://yourapp.com/order-confirmed?session_id={CHECKOUT_SESSION_ID}', cancel_url: 'https://yourapp.com/checkout', metadata: {userId} }). Return the session.url to the client.

1const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
2
3exports.createCheckoutSession = async (req, res) => {
4  const { items, userId } = req.body;
5  const session = await stripe.checkout.sessions.create({
6    line_items: items.map(item => ({
7      price_data: {
8        currency: 'usd',
9        product_data: { name: item.name },
10        unit_amount: Math.round(item.price * 100),
11      },
12      quantity: item.quantity,
13    })),
14    mode: 'payment',
15    success_url: `https://yourapp.com/order-confirmed?session_id={CHECKOUT_SESSION_ID}`,
16    cancel_url: 'https://yourapp.com/checkout',
17    metadata: { userId },
18  });
19  res.json({ url: session.url });
20};

Create a CheckoutPage. Display cart items in a ListView: each Row shows item name, quantity, and price. Below the list, add a Divider, then Rows for Subtotal (sum of item.price * quantity), Tax (subtotal * tax rate), and Total (subtotal + tax) in bold. Use a Custom Function to calculate these values from the cart items App State array. Add a 'Proceed to Payment' button at the bottom.

On the Proceed to Payment button tap, add an API Call action targeting your Cloud Function URL. Pass the cart items and userId in the request body. On success, extract the session.url from the response. Add a Launch URL action with the checkout URL. Stripe opens in the device browser where the user completes payment. On success, Stripe redirects to your success_url.

Create a second Cloud Function for the webhook endpoint. Stripe sends a POST to this URL on events like checkout.session.completed. Verify the webhook signature using stripe.webhooks.constructEvent(body, sig, STRIPE_WEBHOOK_SECRET). On verified checkout.session.completed event, extract the session metadata (userId) and create/update a document in the orders collection: userId, items, amount, paymentStatus: 'paid', stripeSessionId, paidAt. Register the webhook URL in Stripe Dashboard → Webhooks.