React Setup Configure a React project for Stripe Payments This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below. SignUp for Unlimited PRO Access OR *Enrollment provides full access to this course (and updates) for life. 📼 Login to Watch 👈 Express Stripe Checkout 👉 Create a React App command line npx create-react-app myapp Setup Stripe file_type_js_official command line npm install @stripe/react-stripe-js @stripe/stripe-js index.js import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; export const stripePromise = loadStripe( 'pk_test_...' ); ReactDOM.render( <React.StrictMode> <Elements stripe={stripePromise}> <App /> </Elements> </React.StrictMode>, document.getElementById('root') ); React Router command line npm install react-router-dom Create empty files for the components referenced in the router below, like Checkout.js, Payments.js, etc. App.js import React from 'react'; import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; import { Checkout, CheckoutSuccess, CheckoutFail } from './Checkout'; import Payments from './Payments'; import Customers from './Customers'; import Subscriptions from './Subscriptions'; function App() { return ( <Router> <div> <nav> <ul className="navbar-nav"> <li> <Link to="/">Home</Link> </li> <li> <Link to="/checkout"> <span aria-label="emoji" role="img"> 🛒 </span>{' '} Checkout </Link> </li> <li> <Link to="/payments"> <span aria-label="emoji" role="img"> 💸 </span>{' '} Payments </Link> </li> <li> <Link to="/customers"> <span aria-label="emoji" role="img"> 🧑🏿🤝🧑🏻 </span>{' '} Customers </Link> </li> <li> <Link to="/subscriptions"> <span aria-label="emoji" role="img"> 🔄 </span>{' '} Subscriptions </Link> </li> </ul> </nav> <main> <Switch> <Route path="/checkout"> <Checkout /> </Route> <Route path="/payments"> <Payments /> </Route> <Route path="/customers"> <Customers /> </Route> <Route path="/subscriptions"> <Subscriptions /> </Route> <Route path="/success"> <CheckoutSuccess /> </Route> <Route path="/failed"> <CheckoutFail /> </Route> <Route path="/"> <Home /> </Route> </Switch> </main> </div> </Router> ); } function Home() { return ( <> <h2>Stripe React + Node.js</h2> </> ); } export default App; Chapters Get Started 📜 1 Resources Source code and resources free 2:23 2 How does Stripe Work? Understand how payment flows work in Stripe as a developer free 4:34 3 API Keys How to safely work with Stripe API keys free 1:42 4 Intro to HTTP and REST How RESTful APIs work and tools that will increase your productivity free 3:04 5 Node Setup Configure Node.js for hot reloading with TypeScript free 4:50 6 Express Build your first API endpoint with Express 3:46 7 React Setup Configure a React project for Stripe Payments 2:47 Stripe Checkout 🛒 8 Stripe Checkout What is Stripe Checkout and should you use it? 1:49 🛒 9 Stripe Checkout on the Server Create a checkout session on the server 3:39 10 Checkout with React Complete a checkout session and redirect to a success or fail page 6:21 3D Secure Payments 💸 11 Payment Intents API Change and save credit card details with Payment Intents API 1:50 💸 12 Create a Payment Intent How to create a Payment Intent on the Server 1:39 🎣 13 Stripe Webhooks How to work with Stripe webhook events in development 4:45 14 React React integration of Payment Intents API & Stripe Elements 4:26 Customer Management & Saved Cards 🧑🏿🤝🧑🏻 15 Customers and Saved Cards Manage Customers and Save Cards 1:42 file_type_firebase 16 Firebase Setup Add the Firebase SDKs to your server and frontend app 3:07 17 API Authentication How to decode the Firebase JSON web token with Express 3:35 🧑🏿🤝🧑🏻 18 Create a Customer Create a Stripe customer record and attach it to a Firebase user. 2:05 🧑🏿🤝🧑🏻 19 Save and List Card Save a card for future payments & list all available cards 2:08 20 React SignIn with Firebase, then save a credit card to the customer account. 3:46 Subscriptions & Billing 🔄 21 Billing Use Stripe billing to manage customers and their payment history 2:01 🔄 22 Create a Subscription Add a customer to a paid subscription plan 3:12 🔄 23 Cancel a Subscription Cancel a subscription 2:21 🔄 24 Recurring Payments Webhooks to handle recurring subscription payments and cancelations 3:02 25 Billing with React Integrate stripe subscription billing in React 5:58 Deployment file_type_docker 26 Docker Dockererize your Node.js API and deploy it to Cloud Run 4:22 file_type_firebase 27 Firebase Cloud Functions Refactor the API for Firebase Cloud Functions 3:25