Stripe Masterclass With React.js & Node.js

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.

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.

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 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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.