How to Set Up a Virtual Wallet for In-App Currency in FlutterFlow

Add a coinBalance (int) field to your users collection, initialized to 0 on signup. Add a dailyBonusStreak (int) and lastBonusClaim (Timestamp) field for the daily bonus system. Create a subcollection `users/{uid}/transactions` with fields: type (String — earned, spent, purchased, bonus, referral), amount (int — positive for credits, negative for debits), description (String), balanceBefore (int), balanceAfter (int), and timestamp (Timestamp). Create a `coin_packs` collection with documents for each purchasable pack: name (String), coinAmount (int), priceUsd (double), stripePriceId (String), and iconUrl (String).

Create a WalletPage with a prominent wallet card Container at the top. Style it with a gradient background (gold to dark amber) and rounded corners. Inside, place a Row with a coin Image asset on the left and a Column on the right showing 'Your Coins' label and the balance amount as a large bold Text bound to currentUserDocument.coinBalance. Below the balance, add a Row of quick-action Buttons: 'Buy Coins', 'Daily Bonus', and 'Transaction History'. Add a LottieAnimation widget positioned behind the balance text that plays a coin shimmer animation on page load for visual polish.

Below the wallet card, add a 'Buy Coins' section with a GridView bound to a Backend Query on the coin_packs collection. Each pack shows a Container with the coin amount, price, and a Buy button. On Buy tap, call a Cloud Function named purchaseCoinPack that creates a Stripe Checkout Session in payment mode using the pack's stripePriceId and the user's ID as client_reference_id. Return the session URL and launch it. Create a Stripe webhook Cloud Function that listens for checkout.session.completed events. On success, read the purchased pack's coinAmount, use a Firestore transaction to atomically read the current balance, add the coins, write the new balance, and create a transaction document with type 'purchased'.

1// Cloud Function: purchaseCoinPack webhook handler
2const event = stripe.webhooks.constructEvent(
3  req.rawBody, sig, secret
4);
5
6if (event.type === 'checkout.session.completed') {
7  const session = event.data.object;
8  const userId = session.client_reference_id;
9  const packId = session.metadata.packId;
10
11  const packDoc = await db.doc(`coin_packs/${packId}`).get();
12  const coinAmount = packDoc.data().coinAmount;
13
14  await db.runTransaction(async (tx) => {
15    const userRef = db.doc(`users/${userId}`);
16    const user = await tx.get(userRef);
17    const before = user.data().coinBalance || 0;
18    const after = before + coinAmount;
19
20    tx.update(userRef, { coinBalance: after });
21    tx.create(
22      userRef.collection('transactions').doc(), {
23        type: 'purchased',
24        amount: coinAmount,
25        description: `Purchased ${coinAmount} coins`,
26        balanceBefore: before,
27        balanceAfter: after,
28        timestamp: admin.firestore.FieldValue
29          .serverTimestamp(),
30      }
31    );
32  });
33}

Add a 'Claim Daily Bonus' button on the wallet page. On tap, call a Cloud Function named claimDailyBonus. The function checks the user's lastBonusClaim timestamp. If it was less than 24 hours ago, reject with 'Already claimed today'. If it was between 24-48 hours ago, increment the streak. If more than 48 hours, reset the streak to 1. Calculate the bonus amount: base 10 coins multiplied by the streak (capped at 7x). Use a Firestore transaction to update coinBalance, dailyBonusStreak, lastBonusClaim, and create a transaction document with type 'bonus'. In FlutterFlow, on successful claim, play the Lottie coin animation and show a SnackBar with 'Day {streak}: You earned {amount} coins!'.

Create an in-app Store page with items that cost coins. Each item has a coinPrice field. On the Buy with Coins button tap, call a Cloud Function named spendCoins that accepts the userId and coinPrice. The function validates that coinBalance >= coinPrice using a Firestore transaction. If sufficient, deduct the coins, create a transaction document with type 'spent', and return success. If insufficient, return an error with 'Not enough coins — you need {shortage} more'. In FlutterFlow, on success, show a success animation and update the UI. On failure, show an alert dialog with the error message and a 'Buy More Coins' button linking to the purchase section.

Create a Transaction History section accessible via the wallet card quick-action button or a separate page. Add a Backend Query on `users/{uid}/transactions` ordered by timestamp descending. Bind results to a ListView. Each item shows a Container with a left icon colored by type (green coin for earned/purchased/bonus, red minus for spent), the description text, the amount (positive amounts with a + prefix in green, negative in red), and the relative timestamp. Add ChoiceChips above the list to filter by transaction type: All, Earned, Spent, Purchased, Bonus. Set Single Time Query to OFF so new transactions appear in real time.