Build Full Stack iOS Ecommerce App With Plaid and Stripe

Set up a new Xcode project named Bon Voyage, configure storyboard-based UI, and import app icons, dev assets, and custom views to prepare a full stack iOS ecommerce app.

Follow the design specs to build the login view with color assets in Xcode. Apply hex values, card views, and constraints to style the title and fields.

Finish the register view for the login screen by building a registration card with email and password fields, a confirm password field, a register button, and a styled background image.

Create a home view with a navigation controller and login flow, then use a user icon to show an action sheet for logout, manage cards, and manage banks.

Create a vacation model and display vacation packages in a home screen table view. Implement default and firestore dictionary initializers, and design a card-styled cell with price, title, and images.

Set up a table view on the home screen, register and configure a vacation cell, and display image, title, and price with constraints, shadows, and sd web image loading.

Formats pennies to currency with an int extension, updates price labels, and navigates from the home view to the vacation details view controller via a storyboard segue.

Add a scroll view for the vacation details and build a content view with a stack view, constrained by content and frame layout guides for smooth scrolling.

Build vacation details screens by refining the view controller, gallery cards, and content cards for highlights, leisure, and activities, with responsive constraints and a book button.

Finish the vacation details view by building an image gallery with a main image and horizontal thumbnails, wiring outlets and constraints, and enable thumbnail selection to update the main image.

Build a checkout view in the iOS app by adding a new view controller, presenting trip details, and selecting between a credit card or bank account with Stripe and Plaid.

Enhance the checkout view by adding payment method buttons with icons, configuring images and labels, and applying constraints and stack views for a polished checkout experience.

Enable selectable card or bank options in the checkout view with tap gesture recognizers, update borders and icons on selection, and pass vacation data via segue.

Refactor and cleanup guide you through a file-by-file review, extracting constants, renaming items, and improving formatting for a cleaner codebase. Modularize UI setup with focused functions.

Explore the current iOS ecommerce UI, including login, register, vacation list with a collection view, detail view, and checkout with card or bank options via action sheet.

Explore Firebase, Google's comprehensive app development platform, covering analytics, Cloud Firestore, authentication, Cloud Functions, hosting, storage, messaging, crash reporting, app distribution, and Stripe integrations.

Explore Firebase cloud functions as serverless computing that runs in a managed environment, automatically scales with usage, and can be triggered by HTTP requests or Firebase events.

Learn to set up cloud functions with Node.js and npm, install the Firebase CLI, initialize a project, write a hello world function, and deploy.

Discover how cloud functions in Firebase and Google Cloud enable scalable, event-driven code for iOS ecommerce apps, powering notifications, emails, image processing, invoices, and third-party integrations.

Explore the main cloud function types, from https request and https callable functions to scheduled and event-triggered triggers, including firestore, real-time database, and cloud storage.

Learn to build an HTTP cloud function with Firebase Admin, parsing the request body email to fetch and delete a user by email, using async/await for clean code.

Explore firestore cloud triggers that run code on create, update, and delete events in a collection, keeping data in sync with Golia and related collections like reviews.

Discover Stripe, a developer-focused payments platform that removes financial complexity by handling pci compliance and secure card data transmission, guided by industry-standard documentation.

Learn to securely integrate Stripe in the Bon Voyage iOS app using a client-server flow with Firebase Cloud Functions, keeping secret keys safe and creating Stripe customers for new users.

Create a Stripe customer via a cloud function triggered from the iOS app sending the user email. Store the Stripe ID in Firestore and notify the app on completion.

Explore cloud Firestore, a no-SQL, document-oriented database. Compare with relational databases, understand collections, documents, schemas, and key-value pairs, and see schema flexibility.

Learn to read and write Cloud Firestore data by creating collections and documents, using fields like string, map, timestamp, and subcollections, with practical iOS examples.

Create a user model with id, stripe ID, and email, and implement a singleton user manager to fetch the current user from Firestore and initialize it from dictionary data.

Learn to create ephemeral keys for Stripe in a full-stack iOS ecommerce app, via a cloud function and a client app supplying the key to the Stripe SDK.

Configure a Stripe customer context and payment context via a wallet singleton, then present the payment options view to manage credit cards in test mode.

Build a Swift fees calculator to compute Stripe processing costs of 2.9 percent plus 30 cents on a subtotal, using pennies, integer math, and testing examples.

Master the Stripe payment intents API to manage end-to-end payments, obtain the client secret, and complete payments securely via the Stripe SDK with credit cards and debit or bank payments.

Create a cloud function to generate a Stripe payment intent from client data—total, currency USD, customer, and payment methods—and return the client secret. Handle errors by logging and returning null.

Finish the checkout view controller by adding pay, change card, and change bank actions; display price, processing fee, and total via the fees calculator, with reusable setup functions.

Complete a client-side Stripe payment by orchestrating a payment intent flow with the client secret, publishable key, and a payment context delegate, including cloud function calls and user confirmation.

Explore Stripe features from the console dashboard and payment statuses to exporting reports and connected accounts. Learn about Atlas for forming a company and browse Stripe's developer resources.

Deploy the admin web app by installing dependencies, configuring the firebase project, and hosting on firebase hosting; test locally with npm run start, then publish to a live URL.

Walk through deploying a react web admin app to firebase hosting, while clarifying core react concepts and comparing web development’s low barriers to entry with mobile development.

Explore how a React web app is scaffolded with Create React App, and compare its project structure—package.json, node_modules, and the build process—to familiar iOS workflows.

Learn to deploy a React admin app to Firebase hosting with the Firebase CLI, configure the public build directory, enable single-page app rewrites, and publish to a hosting URL.

Join a source code tour of the admin app, deploy to Firebase hosting, configure the Firebase project, and manage vacation packages with Firestore, image uploads, and Ant Design components.

Fetches vacations from Firestore's vacations collection using a snapshot listener, builds vacation objects from document data, and updates the table view, replacing demo data.

Set up dev and production environments with distinct firebase projects and stripe test vs live keys. Configure cloud functions and admin app for the correct environment.

Create dev and production environments in Xcode using schemes and build configurations, with separate Firebase projects and per-environment GoogleService-Info.plist files.

Configure dev and production environments for a web app by managing Firebase configs and npm scripts, with dynamic environment selection, and validate across web and iOS projects.

Explore how Plaid links bank accounts to a Stripe-powered checkout, using link tokens, token exchanges, and cloud functions to create a Stripe bank account payment method.

Sign up for plaid, verify your email, and explore sandbox, development, and production tiers before connecting plaid to Stripe for your full stack iOS ecommerce app.

Create a Plaid link token cloud function that initializes a Plaid client, requests and returns the link token, enabling the bank-link flow before exchanging for an access token with Stripe.

Fetch link token teaches calling a Firebase cloud function from a Swift client to obtain a Plaid link token, with testing in Xcode.

Create a manage bank accounts screen in an iOS app, displaying linked banks in a table view with swipe-to-delete and a button to launch plaid flow for adding new accounts.

Launch plaid flow to connect a bank account via the link flow and exchange the public token for an access token to create the Stripe bank account.

Demonstrates exchanging a plaid public token for an access token through a cloud function, then creating a stripe bank account and linking it to the user in the iOS app.

Link plaid bank accounts, fetch them as bank objects from stripe via a cloud function, and persist them in the wallet for display.

Enable swipe-to-delete for bank accounts in the iOS e-commerce app, confirm deletions with an alert, and sync removals with Stripe, the local wallet, and cloud functions.

Learn to enable bank payments in an iOS ecommerce app by integrating Plaid and Stripe, calculating bank and card fees, and updating the checkout flow.

Explain how Plaid link redirects work in Europe using OAuth, configure redirect URIs in the Plaid dashboard and iOS project, and update flow handling for seamless authentication.

Learn how to manage Plaid deployment environments across development, sandbox, and production using Firebase functions config and environment variables; switch between development and production, set keys, and deploy.

Learn to replace test-mode access with Firestore security rules that enforce user-owned documents and admin controls, using request.auth.uid to gate reads and writes in users and vacations collections.

Explore the Firebase email extension, a cloud function that triggers emails when a document is added to a mail collection using SendGrid. Configure api keys, security rules, and testing.