Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA Amazon AWS CompTIA Security+ AWS Certified Developer - Associate
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Mindfulness Personal Transformation Meditation Life Purpose Coaching Neuroscience
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
2020-12-01 21:33:26
30-Day Money-Back Guarantee

This course includes:

  • 9 hours on-demand video
  • 4 articles
  • Full lifetime access
  • Access on mobile and TV
Development Web Development Stripe Payments Platform

Stripe Masterclass With React.js & Node.js

Build a real world fully functional e-commerce site with React, Hooks, Context API, Node.js, Express.js and Firebase
New
Rating: 4.7 out of 54.7 (4 ratings)
80 students
Created by Abdi Ahmed
Last updated 1/2021
English
English [Auto]
30-Day Money-Back Guarantee

What you'll learn

  • Real World Backend RESTful API For Accepting Payments With Stripe
  • How To Build An E-Commerce Cart with React
  • How To Accept Payments With Stripe
  • How To Save Customer Credit Card Information
  • Learn All About Webhooks By Securely Listening For Events From Stripe With webhooks
  • Learn About 3D Secure payment handling
  • Learn How To Create Customers With Stripe

Course content

7 sections • 95 lectures • 9h 3m total length

  • Preview02:41
  • Preview02:29
  • Course Resources
    00:08

  • Setup React App With CRA
    05:08
  • CSS Setup
    03:23
  • Node Sass Issue
    02:10
  • Header 1
    06:56
  • Header 2
    03:23
  • Cart Icon
    08:31
  • Hero
    07:52
  • Main Section 1
    06:38
  • Main Section 2
    04:06
  • Products Context
    05:57
  • Featured Product
    04:55
  • Featured Collection
    06:28
  • Footer
    02:36
  • Layout and Home Page
    06:46
  • Not Found
    03:27
  • Shop Page 1
    06:05
  • Shop Page 2
    03:20
  • Single Product View 1
    08:23
  • Single Product View 2
    10:28
  • Single Product View 3
    08:15

  • Preview01:29
  • Create Cart Context
    09:45
  • Add Product
    10:50
  • Helper Function
    02:36
  • Add Click Handler To Add Product To Cart
    07:42
  • Test Add Product Feature
    05:02
  • Add Click Handler To Single Product Component
    07:05
  • Increase Item Quantity
    07:16
  • SVG Component For Cart Page
    00:07
  • Cart Page Build 1
    02:39
  • Cart Page Build 2
    07:34
  • Cart Page Build 3
    06:18
  • Cart Page Build 4
    12:27
  • Cart Page Build 5
    08:33
  • Decrease Item Quantity
    09:19
  • Remove Item From Cart
    04:29
  • Clear The Cart
    02:50
  • Persist Cart Data
    05:38

  • React Cart Repo
    00:06
  • Preview01:54
  • Stripe Account Setup
    00:59
  • Preview06:22
  • Stripe Payment Flow
    01:42
  • Node Setup
    06:38
  • What Is Stripe Checkout
    01:00
  • Stripe Checkout Process
    01:05
  • Create Stripe Object In The Server
    02:22
  • Create Checkout Session Endpoint
    11:10
  • Create Checkout Session Endpoint 2
    01:15
  • Test Checkout Session Endpoint
    03:33
  • Setup Stripe On Frontend
    04:47
  • Checkout Page
    09:29
  • Fetch Helper Function
    03:28
  • Stripe Checkout Component
    06:18
  • Stripe Checkout Component 2
    12:38
  • Create Success & Canceled Pages
    14:14
  • Webhooks Introduction
    01:28
  • Success Component Fix
    01:43
  • Webhooks
    02:24
  • Webhooks 2
    02:17
  • Webhooks 3
    07:23

  • Stripe Custom Checkout Process
    01:47
  • Create Payment Intent Endpoint
    10:48
  • Test Payment Intent Endpoint
    01:11
  • Note on Formik import
    00:14
  • Build Shipping Address Component
    10:33
  • Build Shipping Address Component 2
    04:34
  • Build Custom Checkout Component
    12:08
  • Build Custom Checkout Component 2
    07:20
  • Create Handle Checkout Component
    09:00
  • Webhook Update
    08:23

  • Create Firebase Project
    05:08
  • Build Sign Up Component
    11:02
  • Build Sign In Component
    09:16
  • Create User Profile Function
    07:20
  • Create User Context
    09:56
  • Update Sign Up Component
    07:38
  • Update Sign In Component
    05:29
  • Update Header Menu Links
    07:31
  • Update Fetch fromAPI function
    02:33
  • Create Service Account Environment Variable
    02:17
  • Firebase Initialization
    01:58
  • Auth Helper Functions
    06:13

  • Get Customer From Stripe Function
    08:01
  • Create Setup Intent Endpoint
    06:42
  • Create Get Payment Method Endpoint
    12:04
  • Validate User Fix
    00:41
  • Show Saved Cards 1
    11:26
  • Show Saved Cards 2
    02:16
  • Save Card During Payment
    08:00
  • Test Saved Card
    05:49
  • Pay With Saved Card & Wrap Up
    10:36

Requirements

  • Basic programming principles
  • Modern JavaScript (ES6)
  • Basic Understanding Of React Library
  • Basic Understanding Of APIs

Description

You will build a real world fully functional e-commerce site with React, Hooks, Context API, Node.js, Express.js and Firebase with the following features:

  • Node.js Server with Express

  • React frontend

  • Fully function e-commerce cart built with only functional components, hooks, & the context API

  • 3D Secure payment handling with Stripe

  • Manage Stripe customers and save credit cards for future use

  • Securely listen to events from Stripe via webhooks

  • Learn how to read the comprehensive Stripe API documentation

Who this course is for:

  • People who want to learn how to integrate a payment processing gateway
  • Entrepreneurs and app developers who want to integrate their website or App with Stripe

Instructor

Abdi Ahmed
Software Engineer, Teacher and Author.
Abdi Ahmed
  • 4.4 Instructor Rating
  • 443 Reviews
  • 17,382 Students
  • 2 Courses

A versatile fullstack JavaScript Developer with a passion for Software Engineering and solving challenging problems. Enjoys working on complex applications using the right tools and functional programming. A strong background in JavaScript, comfortable building fullstack applications. As an ex school teacher, Abdi loves teaching and breaking down complex concepts and ideas for anyone interested enough to understand. 

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.