Build Complete Shopping App with Payments (120 Minutes)

1. Stripe Account Setup (10 minutes)
Complete Stripe Setup:

1. stripe.com → Create account (free)
2. Dashboard → Developers → API Keys
3. Copy:
• Publishable Key: pk_live_…
• Secret Key: sk_live_…
4. Dashboard → Payment Methods → Enable Cards
5. Products → Add test product

Test Mode (Essential):

Toggle ON (top right) → Green
Test Card: 4242 4242 4242 4242
Any future date + 3-digit CVC

2. New E-commerce App in Adalo (5 minutes) :

App Name: « ShopPro Mobile »
Blank App
Primary Color: #FF6B35 (Orange)
Secondary: #2E86AB (Blue)
Preview on phone immediately

5 Essential Screens:

1. Home/Products Grid
2. Product Detail
3. Shopping Cart
4. Checkout (Stripe)
5. Order Confirmation

3. Screen 1: Products Home (20 minutes)
Products Collection Setup:

External Collection → Shopify/Stripe Products
OR Internal Database:
Fields:
• productName
• price (number)
• imageUrl
• description (short)
• category
• stock (number)

Sample Products Data (Add 8 products):

1. iPhone Case – $19.99 – phonecase.jpg – « Slim fit protection »
2. Wireless Charger – $29.99 – charger.jpg – « Fast wireless charging »
3. Laptop Stand – $39.99 – stand.jpg – « Ergonomic cooling stand »
4. Bluetooth Speaker – $49.99 – speaker.jpg – « 24hr battery life »
5. Wireless Mouse – $24.99 – mouse.jpg – « Precision tracking »
6. Phone Holder – $14.99 – holder.jpg – « Adjustable car mount »
7. Cable Organizer – $9.99 – organizer.jpg – « Neat cable management »
8. Screen Protector – $12.99 – protector.jpg – « Anti-scratch glass »

Grid Layout:

4 products per row
Each card:
• Image (200×200)
• Product name (bold)
• Price ($XX.XX)
• « Add to Cart » button (orange)
• Favorite heart icon

4. Screen 2: Product Detail (15 minutes)
Single Product Screen:

Top: Hero Image (full width)
Middle: Product Info + Buy
Bottom: Description + Related

Components:

1. Image Carousel (3-5 product angles)
2. H1: Product Name
3. Price Tag: « $XX.XX » (large, orange)
4. Quantity Selector (+/- buttons)
5. Primary Button: « Add to Cart » → Update Cart
6. Secondary: « Buy Now » → Checkout
7. Divider
8. Expandable Description Text
9. Horizontal List: « You might also like » (4 products)

Add to Cart Action:

1. Check stock > 0
2. Add to Cart Collection:
• productId
• quantity (1)
• price
• total = price × quantity
3. Show success toast: « Added to cart! »
4. Update Cart Count badge

5. Screen 3: Shopping Cart (20 minutes)
Cart Collection:

Collection: CartItems
Fields: product, quantity, price, total

Cart Screen Layout:

Top: « My Cart (X items) »
List: Cart Items
Subtotal Section
Checkout Button
« Continue Shopping » link

Each Cart Item:

• Product image (thumbnail)
• Name + Size/Color
• Quantity (+/- buttons)
• Price × Qty = Subtotal
• « Remove » × icon

Footer Summary:

Subtotal: $XX.XX
Shipping: $X.XX (or Free over $50)
Taxes: $X.XX
TOTAL: $XX.XX ← Large Orange Button

Actions:

+/- Buttons → Update quantity → Recalculate total
Remove → Delete from cart → Refresh total
Checkout → Navigate Checkout Screen

6. Screen 4: Checkout with Stripe (25 minutes)
Checkout Form Sections:

1. Contact Info
2. Shipping Address
3. Payment (Stripe)
4. Order Review

Contact Info:

• Email (pre-filled from profile)
• Phone

Shipping Address:

• Full Name
• Street Address
• City, State, ZIP
• Country dropdown

Stripe Payment:

Stripe Elements Component:
1. Add Stripe Card Input
2. Publishable Key: pk_test_…
3. CVC + Expiry auto-validation
4. « Pay $XX.XX » button (disabled until valid)

Stripe Payment Flow:

1. Collect card details
2. Create Payment Intent (External API)
3. Confirm payment
4. If success → Create Order → Navigate Success
5. If fail → Show error toast

7. Screen 5: Order Success (10 minutes)
Success Screen:

✅ Large checkmark icon
✅ « Order Confirmed! »
✅ Order #12345
✅ Estimated delivery: Dec 5-7
✅ Payment: ****4242

Buttons:
• « View Order Details »
• « Shop More Products »
• « Share Order » (WhatsApp)

Actions:

1. Save order to Orders collection
2. Clear shopping cart
3. Email confirmation (Zapier/External)
4. Update inventory quantities

8. Backend API Setup (Stripe Payment Intent)
External Collection: Stripe API :

POST https://api.stripe.com/v1/payment_intents
Headers:
• Authorization: Bearer sk_test_…
• Content-Type: application/x-www-form-urlencoded

Form Data:
• amount: [total_cents]
• currency: usd
• metadata[order_id]: [order_number]

Success Response:

Parse: payment_intent.client_secret
Use in Stripe Elements confirmCardPayment

Parse: payment_intent.client_secret
Use in Stripe Elements confirmCardPayment

9. Complete Testing (15 minutes)
Full Purchase Flow Test:

1. Add 3 products to cart
2. Go to cart → Adjust quantities
3. Checkout → Fill shipping
4. Stripe test card: 4242424242424242
5. Verify order created
6. Check inventory updated
7. Test on iPhone + Android

Edge Cases:

✅ Empty cart checkout (block)
✅ Invalid card (error handling)
✅ Out of stock (remove from cart)
✅ Network error (retry logic)

10. Production Deployment Checklist :

✅ Replace test Stripe keys
✅ Add real products/inventory
✅ Privacy Policy + Terms page
✅ GDPR consent checkbox
✅ App store screenshots ready
✅ ASO keywords: shopping, e-commerce, mobile store

Revenue Potential:

10 sales/day × $25 avg = $250/day
30% margin = $75 profit/day
Monthly: $2,250 profit from your app