Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Build Full Stack iOS Ecommerce App With Plaid and Stripe

Name: Build Full Stack iOS Ecommerce App With Plaid and Stripe
Rating: 4.8 (33 reviews)

Build an iOS client app and deploy a React admin web app. Learn how to use the Firebase suite, Stripe, and Plaid.

Created byJonathan Burgoyne

Last updated 3/2021

English

English [Auto],

What you'll learn

Build full stack iOS Ecommerce App
Learn how to process credit card payments with Stripe
Learn how to process bank account payments using Plaid and Stripe
Learn how to set up deployment environments (for example dev, staging, production environments)
Learn how to utilize cloud functions to communicate with other servers for security reasons.
Utilize most of the extensive Firebase suite.

Course content

10 sections • 86 lectures • 13h 22m total length

Course Introduction7:22

Project Setup5:16
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.
Design Specs and Login View16:21
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.
Register User View8:52
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.
Home View Part 112:55
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.
HomeVC Part 2 - Vacation Model11:15
HomeVC Part 3 - TableView18:36
Vacation Details View Part 110:20
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.
Vacation Details Pt 2: ScrollView8:23
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.
Vacation Details Pt 3: Filling In The Details11:35
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.
Vacation Details Pt 4: Image Gallery24:59
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.
Checkout View Part 18:20
Checkout View Part 213:37
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.
Checkout View Part 313:00
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 Cleanup14:08
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.

I Skipped The UI Section5:56
What Is Firebase9:53
Pre-Text: Creating Firebase Project0:23
Creating Firebase Project17:26
IMPORTANT!!!
In this lesson we add Cocoa Pods and Firebase to our Xcode project.
Note, that from now on when you download the source code, you will need to add your own GoogleSerivce-Info.plist file from your Firebase project and change the bundle id in the Xcode project -> Target info to match what your Firebase project iOS app is set to.
You will also need to run a 'pod install' command in terminal to reinstall the CocoaPods since I delete them when uploading to make the file size smaller.
Firebase Authentication Pt 116:34
IMPORTANT!!!
In this lesson we add Cocoa Pods and Firebase to our Xcode project.
Note, that from now on when you download the source code, you will need to add your own GoogleSerivce-Info.plist file from your Firebase project and change the bundle id in the Xcode project -> Target info to match what your Firebase project iOS app is set to.
You will also need to run a 'pod install' command in terminal to reinstall the CocoaPods since I delete them when uploading to make the file size smaller.

@IBOutlet weak var loginEmailTxt: UITextField!
@IBOutlet weak var loginPassword: UITextField!
@IBOutlet weak var registerEmailTxt: UITextField!
@IBOutlet weak var registerPasswordTx: UITextField!
@IBOutlet weak var registerConfirmPassTxt: UITextField!
@IBOutlet weak var activityIndicator: UIActivityIndicatorView!
Firebase Authentication Pt 219:06
IMPORTANT!!!
In this lesson we add Cocoa Pods and Firebase to our Xcode project.
Note, that from now on when you download the source code, you will need to add your own GoogleSerivce-Info.plist file from your Firebase project and change the bundle id in the Xcode project -> Target info to match what your Firebase project iOS app is set to.
You will also need to run a 'pod install' command in terminal to reinstall the CocoaPods since I delete them when uploading to make the file size smaller.

What are Cloud Functions4:12
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.
Creating Cloud Functions Project18:56
What Can You Do With Cloud Functions7:31
Different Types Of Cloud Functions3:43
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.
More on HTTP Request Function24:15
Pre-Text: Firestore Cloud Trigger0:40
Firestore Cloud Trigger13:24
A Cautionary Tale: How I Majorly Screwed Up2:24

What Is Stripe?4:11
Sign Up For Stripe1:38
Client - Backend - Stripe Flow Overview4:29
Pre-Text: Create Stripe Customer0:26
Create Stripe Customer25:42
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.
Firestore Database Introduction6:03
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.
Reading and Writing Firestore Data29:36
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.
Pre-Text: User Service0:35
User Service12:40
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.
Pre-Text: Ephemeral Keys0:27
Ephemeral Keys16:36
Payment Options ViewController12:41
Fees Calculator8:10
Payment Intents API Overview6:28
Pre-Text: Payment Intent Cloud Function0:18
Payment Intent Cloud Function5:37
Finish CheckoutVC UI7:52
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.
Pre-Text: Finalize Payment Intent1:48
Complete Payment Client Side27:13
Stripe Wrap Up9:32

Pre-Text What Is Plaid - CodeSnippets, Resources0:34
What is Plaid?10:37
Sign Up For Plaid4:56
Create Link Token Function15:24
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.
Error Correction/Code Snippets: Fetch Link Token0:19
Fetch Link Token6:14
ManageBankAccountsVC9:05
Launching Plaid Flow16:01
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.
Code Snippets: Exchange Public Token0:26
Exchange Public Token15:15
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.
Fetch Bank Accounts Cloud Function17:43
Code Snippets: Delete Bank Account0:07
Delete Bank Account14:48
Checkout With Bank Account17:34
Code Snippets: Plaid Redirect URI0:25
Plaid Redirect URI (European Countries)10:03
Deployment Environment Setup For Plaid8:02

Requirements

This is an intermediate to advanced course. You need an understanding of Swift and Xcode.

Description

Hi there! I am super excited to launch this course. We are going to be learning a lot, covering a broad range of technologies, services, and skills. My goal, is that by the time you are done with this course, you will have the skills to build a much wider range of applications.

In this course we will build Bon Voyage. An iOS app where users can book extravagant vacations. We integrate Stripe and Plaid to handle payment methods for both credit card and connected bank accounts.

Stripe and Plaid both require server side functions, so you will learn all about Firebase Cloud functions. Cloud Functions alone greatly expand the things you can accomplish as a developer.

We're not stopping there though...

... you will also learn how to deploy a React admin app!

If you are building an eCommerce app either for yourself or a client, you will most likely need some sort of admin app.

In previous courses that required an admin app, I had created an additional iOS or Android admin app. However, the experience for the user, is not great. Especially when adding products that require a lot of text and images.

A web app is much better suited for these types of tasks. So in this course you will learn some of the basics of React development and how to deploy a React app to Firebase Hosting.

** Note that this is not meant to be a comprehensive course on React web development. While we will go over the code, and many concepts, how to deploy, and more, this is not meant to be a course on how to build a React app from scratch.

We will also learn about development and production environments for both web and iOS. This is a crucial concept most courses do not cover.

Deep dive on Stripe and Plaid.

I have been working professionally with Stripe and Plaid for two years now and it is a fantastic service. During this time I have learned a lot (and made some mistakes) and I am excited to pass all that knowledge on to you.

I have real world experience working with Stripe and Plaid. My current clients app has processed over $1,000,000 dollars and more than 3,000 transactions in the past 12 months.

MASTER THE FIREBASE SUITE

If you know me at all, you know I love Firebase. They are my go-to for just about everything you need to build iOS, Android, and Web Apps. Below, are the Firebase services we will be learning about.

Firebase Authentication

Learn how to use Firebase Authentication to create and authenticate users on iOS, Android and Web.

Firestore Database

Learn how to use Cloud Firestore, a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform.

Firebase Storage

We will use Firebase Cloud Storage, built for app developers who need to store and serve user-generated content, such as photos or videos. .

Cloud Functions

Cloud Functions are my new favorite thing. And when combined with the Firebase suite it becomes extremely powerful. In this course you will learn how you can harness that power to take your apps to the next level.

Firebase Hosting

Firebase Hosting makes it extremely easy to host a website for free. In this course we are going to host our Bon Voyage admin app and even learn how to hook it up to a custom domain.

Firebase Extenstions

Firebase Extensions are nifty integrations you can set up that are basically bundled up code that can perform actions on your behalf, such as automatically sending email, or resizing images.

Who Should Take This Course

You should take this course if you are wanting to learn more intermediate to advanced topics, and especially if you want to learn how to implement payment methods in your app.

This is not a beginner course, and intermediate knowledge of Swift and Xcode is assumed. We will also be working with JavaScript, though not doing anything very complex. If you are familiar with Swift, you will be just fine.

Summary of things we cover:

Creating the App UI. But don't worry, if you dont want to watch me create more rounded rectangles, and want to jump right into the good stuff, there will be a starting point where the UI is completed.
Firebase Suite: Firestore, Hosting, Cloud Functions, Extensions, Authentication
How to set up production and development environments in iOS and Web.
Integrate Stripe. Utilize cloud functions to communicate between client app and Stripe servers.
Integrate Plaid. Utilize cloud functions to communicate between client app and Plaid servers.
ReactJS basics. How to deploy to Firebase Hosting.
Swift Package Management
Cocoa Pods
Sending emails to customers using SendGrid and Firestore

Who this course is for:

Intermediate iOS developers who are looking to challenge themselves, and expand their skill set.

Build Full Stack iOS Ecommerce App With Plaid and Stripe

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 7min

Building Out The UI14 lectures • 2hr 58min

Firebase Authentication6 lectures • 1hr 9min

Getting Started With Cloud Functions8 lectures • 1hr 15min

Getting Started With Stripe20 lectures • 3hr 2min

Admin React Web App7 lectures • 51min

Production and Dev Environments5 lectures • 53min

Getting Started With Plaid17 lectures • 2hr 28min

Final Section3 lectures • 29min

Project Source Code5 lectures • 10min

Requirements

Description

Who this course is for: