Stripe Masterclass With React.js & Node.js

Bootstrap a react app quickly with the reactor tool, install dependencies, launch locally on localhost 3000, then customize with useReducer by removing the strict mode wrapper.

Set up the Bomber CSS framework with yarn, install node-sass, and configure UTF-8 while importing utilities, button, container, and hero for a responsive e-commerce UI.

Correct the renamed file and resolve the node-sass issue by uninstalling the current node-sass version, installing the previous stable version, then stop and restart the React app.

Create a components folder with a header component and its JSX and styles files. Install react-router-dom and wrap the app with BrowserRouter to enable links to home and shop.

Style the header component for a responsive navigation menu using flex, padding, and link styling; apply focus, hover, and visited states, adjust the logo size, and debug sass changes.

Add a cart icon to the header using a shopping bag asset, create a cart icon component with a count, and style it for a clean, clickable header.

Build a hero section with Bomber by creating a hero component, using a background image from assets with a dark gradient overlay, and center a shop now button.

Build the main section of a product page in React by rendering an image, a description, and a title, and enable navigation to a single product view with withRouter.

Apply responsive styling to the main section by adjusting image size, typography, and layout with flex and media queries, achieving side-by-side image and description on desktop and stacked mobile view.

Create a product context and provider to hold the shop data. Wrap the app with the provider so nested components access the product list via context.

Create a featured product component that displays a single product with image, title, and price, including an add-to-cart button, and reuse it across the app in the shared folder.

Create a featured collection component that displays the first four products using the product context and inheriting styles from the asphalt and bomber framework.

Create a footer component for the homepage that shows the store name Neamat, the copyright symbol, and the current year, centered and exported for import into the app.

Create a shared layout component that wraps pages with header and footer, renders children, build a home page with hero, main, and featured collection, and configure routes in app.js.

Create a not found 404 component in a React app, center the message, wrap it in the shared layout, and configure a catch-all route to show it.

Create a shop page by building a shop component, wiring a pages/shop folder, importing layout, featured product, and products context, and mapping all products to display under the /shop route.

Apply responsive shop page styling by configuring the product list container, margins, and title, with hover effects and a desktop flex layout; enable navigation to a single product page.

Create a single product view in React that displays image, description, and price with an add-to-cart option, loading from the product context and redirecting to shop if not found.

Render a single product by pulling image, title, price, and description from state, inside a header and footer layout, with add to cart, checkout, loading state, and route with withRouter.

Style the single product view with responsive layout, correct useEffect dependencies, and add navigation to the single product page; prepare the add-to-cart flow in a React e-commerce app.

We explore making the cart functional and decide whether to add redux or rely on React context and useReducer, to reduce technical debt and enable scalable growth.

Create a cart context using useReducer, define initial state with items, item count, and total, and wire dispatch actions for add, remove, and adjust item quantities across components.

This lecture guides you to build an add item action creator that dispatches to a cart context, updates the cart reducer, and computes item counts, quantities, and totals.

Build a helper function to detect if a product is in the cart and switch the button between add to cart and add more, using cart items and product id.

Wire up the add product function using the context, conditionally render add to cart or increase quantity based on isInCart, and pass the product details to update the cart.

Test adding a product to the cart in the Stripe Masterclass with React.js and Node.js, verify state updates, and preview turning add to cart into add more with quantity.

Wire up the single product view by wiring add to cart and add more actions using shared context, optimizing is in cart checks, and aligning with the featured product component.

Implement an increase item quantity feature in a React cart using context and reducer: dispatch increase with the product, update quantity, and reflect changes in the cart.

Create three svg icon components (minus circle, plus circle, trash can) with configurable width, to populate the cart page in the Stripe masterclass with React.js and Node.js.

Build a cart item component in a React project, displaying image, title, price, and quantity with plus, minus, and trash icons, using conditional rendering based on quantity.

Apply cart item classes to structure the cart page, style the item image and name-price container, and design buttons (increase, decrease, trash) with a responsive flex layout and precise widths.

Builds a cart page by wiring the item component to a shared context and layout, renders items or an empty cart message, and prepares the total with checkout.

Build and integrate a cart page total component in a React and Bulma setup, displaying total amount and item count, wiring checkout navigation, and preparing clear and update actions.

Apply decrease item quantity functionality by dispatching a decrease action with product payload, updating cart reducer and items array, and wiring plus and minus controls on the cart page.

Learn to remove an item from the cart by dispatching a remove action with the product as payload, filtering items in the reducer, and wiring the function to cart items.

Clear the cart by dispatching a clear action in the context and resetting items, item count, and total to their initial values, and persist the cart in local storage.

Persist cart data by saving updated cart items to local storage and initializing state from storage, ensuring items remain after page refresh and clearing properly when needed.

Explore how Stripe, a payment gateway, securely handles payment methods and charges, and how its APIs enable one-off, recurring, and usage-based payments with card entry UI components.

Sign up for a Stripe account, complete activation with business address, business and bank details, and optional two-factor authentication to access services in test mode.

Log into the Stripe dashboard to monitor payments, refunds, disputes, and real-time analytics across test and live modes, and manage customers, products, reports, keys, webhooks, and payouts.

Process Stripe payments securely by the backend creating checkout sessions, payment intents, and webhooks. Return a session id or client secret to the frontend to complete one-time or recurring payments.

Set up a node server for stripe integration by installing express, stripe, and cors, and configuring dotenv, nodemon, index.js, .gitignore, and a test route.

Learn Stripe checkout, a hosted payment page for one-time purchases and subscriptions that enables quick setup with no custom integration, while noting its limited customization.

Understand the Stripe checkout flow: customers select items, click checkout, backend creates a Stripe checkout session via the Stripe API, then redirects with the session id to complete payment.

instantiate a Stripe API object on the server, gather line items and customer email to create a checkout session, and pre-populate the email field on the checkout page.

Create a Stripe checkout session endpoint in Node and React, validating line items and email, and configuring payment methods, success URLs, cancel URLs, and shipping address collection.

Correct the checkout endpoint by placing the function in the API folder, fix the stripe API import, and prepare to test creating a Stripe checkout session.

Test the Stripe checkout session endpoint by sending a json body with line items and a customer email, then use the session id to redirect the frontend checkout.

Install the Stripe React and Stripe library, set the publishable key as an environment variable, and initialize Stripe with loadStripe in the frontend; wrap the app with Elements.

Create a React checkout component that displays the cart total and item count, collects the user's email, and redirects to the Stripe hosted checkout page.

Implement a fetch helper that calls API endpoints using a base API URL, with defaults for method post and optional body, uses native fetch with JSON headers, and returns response.

Build a Stripe Checkout component that captures the customer email, creates a checkout session, and redirects to the checkout page using the stripe hook and API fetch.

Builds a front-end stripe checkout flow by initializing use stripe, constructing line items with price data in usd, and redirecting to a checkout session with customer email and shipping.

Create and connect Stripe success and canceled pages in a React app, redirecting users after checkout and clearing context, then offer a continue shopping option.

Learn how stripe webhooks act as endpoints that deliver event objects—such as checkout session complete—to trigger actions like order fulfillment and customer notifications, including handling delayed funds.

Fix the missing use effect dependency warning in the success component by conditionally invoking the click function when items length is nonzero, and clearing the cart.

Attach the raw body to the request for Stripe webhook verification and secure the endpoint. Use Stripe CLI to forward events to your localhost and complete webhook setup.

Forward Stripe webhooks to a local server with Stripe listen, copy the webhook signing secret, set it as an environment variable, and set up the webhook endpoint to process events.

Create a webhook endpoint, verify Stripe events via the signature, and handle checkout.session.completed by logging the session and saving the order to the database.

Create a custom Stripe checkout on your site with React components, handling payment intents and client secrets from server, avoiding redirects, and styling via component props while ensuring data security.

Create a backend payment intent endpoint with Stripe, calculating the amount from items and returning a client secret. Include currency, description, receipt email, and shipping address; test with Postman.

Test the payment intent endpoint with Postman, sending post request with items, shipping address, description, and receipt email; plan to build a shipping address component and a custom checkout component.

Build a shipping address component using formic to collect name, email, and address with initial values and validation for a custom Stripe checkout in React.js.

Build a shipping address component in a React checkout with placeholders for name, email, and address that shows only if not filled. Manage shipping state and lift address to checkout.

Build a custom stripe checkout in react using card number, expiry, and cvc elements, with useelements, styling options, change handling, errors, and api integration.

Build a custom checkout component by sending shipping address and item details to the backend to create a Stripe payment intent, then obtain the client secret and drive checkout flow.

Create a Stripe checkout flow by building a handle checkout function that uses client secret, confirm card payment with card element, and processes shipping and items.

Update the webhook to listen for checkout session completed, payment intent succeeded, and payment intent failed events, routing data to handlers that trigger database updates, user emails, or third-party fulfillment.

Set up a Firebase project to enable user authentication and a payment database, create a web app, enable email/password auth, and initialize Firebase in a React project.

Build a sign up component with formik, featuring email, display name, and password fields, initial values and on submit handling, preparing for firebase authentication.

Build a sign in component with react and formik, initializing email and password fields and handling submit, plus create a sign in route and adjust input width to 60 percent.

Enable Firestore, create a user profile document on first sign-in, and manage user data in the users collection with display name, email, and created at, plus auth setup and listener.

Create a user context in React by subscribing to Firebase auth state changes to expose the currently signed-in user through a context provider, with unsubscribe to prevent memory leaks.

Update sign up component to use Firebase auth, validate email, first name, and password with a Formik-driven form, create user and profile, handle errors, and redirect to shop page.

Wire the sign-in component to use router and firebase auth, with signInWithEmailAndPassword, and redirect on success. Handle errors with an error state and display messages for failed sign-ins.

Build header navigation that shows sign in, sign out, and sign up links using Firebase user context, with a loading state to avoid mismatch while user data loads.

Update the fetch helper to include a Firebase user token in the authorization header, then handle responses by checking status 200 and returning json or throwing an error.

Set up Firebase on the backend by creating a service account key, placing the JSON at the server root, ignoring it with gitignore, and exporting GOOGLE_APPLICATION_CREDENTIALS to initialize Firebase.

Install the Firebase Admin module on the server, create a Firebase file, and initialize the Firebase Admin SDK to export the database and auth for API endpoints.

Decode and verify front-end tokens with Firebase auth, then validate the current user via middleware to protect endpoints.

Build a backend flow to retrieve or create a Stripe customer, save the card, and enable using the saved card for future payments.

Create a setup intent endpoint to securely save a customer's credit card with Stripe, using the current user's Firebase ID to fetch the customer and return the setup intent.

Create a get payment methods endpoint to retrieve a customer's saved card payment methods using Stripe API and return the data array with error handling.

Fix the validate user function to call next when a user is present, ensuring protected endpoints in the Stripe masterclass with React.js and Node.js are reached.

Discover how to load saved cards in a React front end, fetch payment methods from Stripe, and enable checkout with a saved card using a payment intent.

Create dynamic select for saved cards in a Stripe React app, using state to track chosen card with a default option and an onChange handler, showing cards only when present.

Learn to add a 'save card' option during checkout for signed-in users, create a Stripe setup intent on the backend, and confirm the card to save for future payments.

Learn to save a card during checkout with the payment methods API, display saved cards, and update the payment intent to pay with a saved card.

Learn how to complete a saved-card checkout with Stripe by updating the payment intent with the customer, using the client secret and saved method ID, and confirming the card payment.