How to create an e-commerce portal in Bubble.io: Step-by-Step Guide

Go to the Data tab and click Data types. Create a new Data Type called Product with these fields: Name (text), Description (text), Price (number), Image (image), Category (text), Stock (number), and Active (yes/no). Create a second Data Type called Order with fields: Customer (User), Status (text — e.g. Pending, Paid, Shipped, Delivered), Total (number), Stripe_Payment_ID (text), and Created_Date (date). Create a third Data Type called LineItem with fields: Product (Product type), Quantity (number), Subtotal (number), and Order (Order type). This three-type structure separates product data, order metadata, and individual items cleanly.

Go to the Design tab and open your index page (or create a new page called products). Click the + icon, search for Repeating Group, and drag it onto the page. Set its Type of content to Product and Data source to Do a search for Products where Active = yes. Set the layout to a grid (e.g. 3 columns, fixed number of rows: 4). Inside the first cell, add an Image element and set its dynamic source to Current cell's Product's Image. Add a Text element for Current cell's Product's Name, another for Current cell's Product's Price formatted as currency ($), and a Button labeled Add to Cart.

Select the page element (click on the page background) and create a Custom State called cart of type LineItem (check 'This is a list'). On the Add to Cart button's workflow, add action Element Actions → Set state: set cart to cart plus item — but first you need to create the LineItem. Use the action 'Create a new thing' (Type: LineItem, Product = Current cell's Product, Quantity = 1, Subtotal = Current cell's Product's Price). Then Set state of page to cart = page's cart plus item Result of step 1. For the cart display, add a Floating Group anchored to the right. Inside it, place a Repeating Group with Type: LineItem and Data source: page's cart. Display each item's Product Name, Quantity, and Subtotal. Add a Text element below showing the total: page's cart's each item's Subtotal:sum formatted as currency.

Go to the Plugins tab and click Add plugins. Search for Stripe and install the official Stripe plugin by Bubble. Once installed, click the plugin name to open its settings. Paste your Stripe Test Publishable Key into the Publishable key field and your Test Secret Key into the Secret key field. You can find these in your Stripe dashboard under Developers → API keys. Keep the keys in test mode until you are ready to go live. Scroll down to Checkout settings and ensure 'Use Stripe Checkout' is enabled.

On the cart Floating Group, add a Checkout button. Create a workflow: When Checkout button is clicked. Add action Plugins → Stripe Checkout. In the Stripe Checkout action settings, set the Line items dynamically from the page's cart list — map each LineItem's Product Name as the description, Subtotal as the amount (in cents — multiply by 100), and Quantity. Set the success URL to your order confirmation page and the cancel URL back to the products page. After the Stripe Checkout action, add a second action: Create a new thing (Type: Order, Customer = Current User, Status = Pending, Total = page's cart's each item's Subtotal:sum). Then add actions to Make changes to a list of things — set each LineItem in the cart to have Order = Result of step 2.

In the Stripe dashboard, go to Developers → Webhooks → Add endpoint. Enter your Bubble backend workflow URL (you will create this next). In Bubble, go to the Workflow tab, open the pages dropdown, and click Backend workflows at the bottom. Create a new backend workflow called stripe-webhook. Add a parameter called stripe_event of type text. In the workflow actions, use the 'Make changes to a thing' action: search for the Order whose Stripe_Payment_ID matches the event's payment intent ID and set its Status to Paid. Back in the Stripe dashboard, set the webhook to listen for checkout.session.completed events.

Create a new page called admin-orders. Add a Repeating Group with Type of content: Order and Data source: Do a search for Orders, sorted by Created Date descending. In each cell, display the Order's Customer email, Status, Total formatted as currency, and Created Date formatted as MM/DD/YYYY. Add a Dropdown element in each cell with values from the Order Status Option Set (Pending, Paid, Shipped, Delivered). Create a workflow on the dropdown: When dropdown value changes → Make changes to Current cell's Order → set Status to This dropdown's value. Add Privacy Rules on the Order Data Type: only users with an Admin role field = yes can view all orders.

Create a page called my-orders. Add a Repeating Group with Type: Order and Data source: Do a search for Orders where Customer = Current User, sorted by Created Date descending. In each cell, show the order's Status (with conditional coloring — green for Delivered, yellow for Shipped, blue for Paid, gray for Pending), Total, and date. Add a group inside each cell that is only visible when the cell is clicked — this expands to show the order's LineItems in a nested Repeating Group (Type: LineItem, Data source: Search for LineItems where Order = Current cell's Order). Each LineItem row shows Product Name, Quantity, and Subtotal.