How to Create a Peer-to-Peer Payment System in FlutterFlow

Create a wallets collection with fields: userId (String), balance (Double, default 0), lastUpdatedAt (Timestamp). Each user gets one wallet document, created on signup. Create a transactions collection with fields: fromUserId (String), toUserId (String), amount (Double), message (String, optional), type (String: send, receive, request_paid), timestamp (Timestamp). Create a payment_requests collection with fields: fromUserId (String), toUserId (String), amount (Double), message (String), status (String: pending, paid, declined), createdAt (Timestamp), resolvedAt (Timestamp, nullable). Add indexes on transactions for userId lookups and on payment_requests for status filtering.

Create a WalletPage with the user's balance displayed prominently at the top in a Container with large styled text. Below the balance, add a Row with three action buttons: Send (paper plane icon), Request (hand icon), and Split (group icon). Below the actions, add a ListView showing recent transactions, querying the transactions collection where either fromUserId or toUserId equals the current user, ordered by timestamp descending, limited to the 10 most recent. Each transaction row shows the other user's name, the amount (green with + for received, red with - for sent), the message if any, and the timestamp. Add a 'See All' link that navigates to a full transaction history page.

On the Send button tap, navigate to a SendMoneyPage. Add a recipient search TextField that queries users by email or display name and shows results in a dropdown ListView. After selecting a recipient, show their avatar and name. Add an amount TextField with numeric keyboard and a message TextField. The Send button calls a Cloud Function named transferFunds that takes senderId, recipientId, amount, and message. The Cloud Function uses a Firestore transaction: read sender's wallet balance, verify balance is sufficient, debit sender (decrement balance), credit recipient (increment balance), create two transaction documents (one for sender, one for recipient). If balance is insufficient, the function throws an error that the client displays.

1// Cloud Function: transferFunds (simplified)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.transferFunds = functions.https.onCall(async (data, context) => {
6  const { recipientId, amount, message } = data;
7  const senderId = context.auth.uid;
8  const db = admin.firestore();
9  
10  await db.runTransaction(async (t) => {
11    const senderWallet = await t.get(db.doc(`wallets/${senderId}`));
12    const recipientWallet = await t.get(db.doc(`wallets/${recipientId}`));
13    
14    const senderBalance = senderWallet.data().balance;
15    if (senderBalance < amount) throw new Error('Insufficient balance');
16    
17    t.update(senderWallet.ref, { balance: senderBalance - amount });
18    t.update(recipientWallet.ref, {
19      balance: recipientWallet.data().balance + amount
20    });
21    t.create(db.collection('transactions').doc(), {
22      fromUserId: senderId, toUserId: recipientId,
23      amount, message, type: 'send', timestamp: admin.firestore.Timestamp.now()
24    });
25  });
26  return { success: true };
27});

On the Request button tap, navigate to a RequestMoneyPage with the same recipient search and amount fields. On submit, create a payment_requests document with status set to pending. The recipient sees pending requests on their WalletPage: add a section above transactions showing a ListView of payment_requests where toUserId equals current user and status is pending. Each request card shows the requester's name, amount, message, and two buttons: Pay and Decline. Pay calls the transferFunds Cloud Function with the request amount (sender is the current user, recipient is the requester) and then updates the payment_requests document status to paid with resolvedAt timestamp. Decline updates the status to declined.

On the Split button tap, navigate to a SplitBillPage. Add a total amount TextField at the top. Below, add a friends selector: query the user's contacts or friends and display them as selectable avatars in a Wrap widget. Tapped friends get a checkmark overlay and are added to a Page State selectedFriends list. Show the calculated per-person amount below: total divided by (selected friends + 1 for the current user), rounded to two decimal places. Add a tip adjustment Slider optionally. On Split, create a payment_request for each selected friend with the per-person amount and a message like 'Split: Dinner at Restaurant - your share'. Display a confirmation showing all requests sent.

Create a TransactionHistoryPage with a ChoiceChips filter at the top: All, Sent, Received, Requests. The All tab queries transactions where fromUserId or toUserId equals current user. The Sent tab filters to fromUserId. The Received tab filters to toUserId. The Requests tab shows payment_requests for the current user. Each transaction row includes a direction indicator icon (arrow up for sent, arrow down for received), the other party's name and avatar, the amount with color coding, the message, and the date. Add a DatePicker range at the top for filtering by time period. At the bottom, show a summary: total sent and total received for the selected period.