How to set up a donation system in Bubble.io: Step-by-Step Guide

Go to the Data tab and click Data types. Click Create a new type and name it Donation. Add these fields: amount (number), donor_name (text), donor_email (text), donation_date (date), is_recurring (yes/no), stripe_charge_id (text), and donor (User, optional — for logged-in donors). This data type stores every donation your app receives.

Switch to the Design tab. Create a new page called donate. Add a Group container with Column layout. Inside it, place a Text element with the heading 'Support Our Mission'. Below it, add four Button elements in a Row group for preset amounts: $10, $25, $50, $100. Below the buttons, add an Input element labeled Custom Amount (content format: Integer). Add two more inputs for Donor Name and Donor Email. Finally, add a Checkbox labeled 'Make this a monthly donation' and a Button labeled 'Donate Now'.

Click the page element in the Element Tree and add a custom state called selected_amount (type: number). For each preset amount button ($10, $25, $50, $100), create a workflow: When Button $10 is clicked → Set state of page → selected_amount = 10. Repeat for each amount. On the Custom Amount input, add a workflow: When Input Custom Amount's value is changed → Set state of page → selected_amount = Input Custom Amount's value. This ensures one value is always selected.

Go to the Plugins tab and open the Stripe.js plugin settings. Enter your Stripe publishable key and secret key from your Stripe Dashboard (use test keys during development). Back on the donate page, select the 'Donate Now' button and create a workflow. Add the action Stripe.js → Charge the current user. Set amount to page's selected_amount * 100 (Stripe uses cents). Set currency to usd. Set description to 'Donation from ' merged with Input Donor Name's value. For recurring donations, use Stripe.js → Subscribe the current user to a plan instead.

In the same workflow, after the Stripe charge action, add a Create a new thing action. Type: Donation. Set amount to page's selected_amount, donor_name to Input Donor Name's value, donor_email to Input Donor Email's value, donation_date to Current date/time, is_recurring to Checkbox Recurring's value, and stripe_charge_id to Result of step (Stripe charge)'s id. Then add a Send email action with the recipient as Input Donor Email's value, subject 'Thank you for your donation!', and body including the amount and date.

Create a new page called admin-donations. Add a Text element showing 'Total Donations: $' followed by Do a search for Donations:each item's amount:sum. Below it, add a Repeating Group with data source Do a search for Donations, sorted by donation_date descending. In each cell, display donor_name, amount, donation_date formatted as MM/DD/YYYY, and is_recurring as a badge. Add a search input above the Repeating Group that filters donations by donor_name contains.