### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

React is a powerful library that gives us the ability to build dynamic apps with the power of JavaScript and the browser. With it, we can personalize apps and add interactions that allow us to deliver a better user experience to our visitors.

Next.js is a web framework that sits on top of React taking the power of React to another level. With it, we get additional data fetching utilities and site compilation that providers optimized builds with logical ways of managing our data.

`create-next-app` is the easiest way to get started with Next.js. This CLI tool will scaffold a bare-bones Next.js application that is configured for you to start using right away. 

We will generate a new application and explore the directories and files that were created for us. The important directories to note are the `pages` and `styles` directories. The `pages` directory is where your app entry point, API, and other pages you will create live. You'll likely spend most of your time here! The `styles` directory contains global s

Create a New React Application with the Next.js create-next-app CLI

The core of any shopping experience is simply being able to see what the store has to offer! This includes what products are available and how much each one of them costs.

While we can do this in a variety of ways, a common way is to show a grid of products where we can see everything the store has to offer (or a lot of it). Using some HTML and CSS, we can create our product grid allowing our customers a look into our store.

The default Next.js template has 'cards' that will serve us well in displaying the products that we want to sell. We will upgrade these cards to handle images and be positioned and styled to our liking.

Add and Style a Grid of Products with Images in a Next.js React App

Part of any eCommerce store starts with what you're trying to sell: the products.

Stripe has a lot of services to give you flexibility as a store manager and that starts with a management tool right in its dashboard to add and manage the products of your store.

We will start with a fresh dashboard and create a few products. You'll get familiar with how to navigate Stripe and learn how to set the Title, Price and upload an image for your products.

Add and Configure Products in the Stripe Dashboard for an Online Store

Manually creating blocks of HTML for every product in our store can take a long time depending on how many products the store has. On top of that, making any changes to those products makes that even more of a challenge as you try to search through the file and know where to make the change.

Instead, we can manage our products in a central location and use that to build our store pages. The central location we'll use is a JSON file within our application that will store all the information on our products. With this information in one place, we can access and use some or all of that info where ever we need it. In this lesson, we'll map over the Products JSON and create our product cards dynamically.

Dynamically Manage a Grid of Products in an Online Store with a JSON Document

In order for someone to buy your products, your store needs to be publicly available.

Vercel is a hosting and deployment solution that works perfectly with Next.js—they're the ones who made it! We can use Vercel to easily deploy our site from GitHub and automatically update our store any time we add any changes. We'll walk through connecting a git repository to Vercel and see exactly how it deploys new versions with each commit to our repo.

Host & Deploy a Next.js React App on Vercel imported from GitHub

Stripe has a variety of solutions that makes it super powerful as a payment provider. We're taking advantage of their Stripe Checkout product because it allows us to get started with an online store without having to manually accept payments.

To do this though, Stripe Checkout relies on the browser to make API requests, which we have to configure to work for our website.

We will set our eCommerce site domain on Stripe's CLIENT-ONLY integration to set us up to add the checkout workflow for our site.

Configure a Stripe Checkout Domain for Client-Only Integration

With Stripe or many other services, their APIs rely on special keys that authenticate requests or allow that service to track usage for things like billing.

Some of these keys are able to be used publicly and some must be kept private, but ultimately we want to have a way to easily manage these keys and not hard-code them into our application, which is where environment variables come in.

We will find our Stripe public key that will be used locally as well as in production on Vercel. You'll learn how to set an environment variable in Next.js (hint, you need to prepend `NEXT_PUBLIC` to the variable name make it available in the client) as well as in production on Vercel.

Add a Stripe API Key as an Environment Variable in Next.js & Vercel

Now that we have an app and our products configure in Stripe, it's time to connect the two and give people a way to purchase our products.

Using Stripe's API, we can initiate a new instance of the Stripe Checkout flow with a simple click of a button.

We'll create an `initiateCheckout` function that handles this flow for us. After loading stripe through `@stripe/stripe-js` we'll `await` a `stripePromise` that will allow us to redirect to stripes checkout flow. You'll notice that we will need to pass in line items with the price id and quantity.

Integrate Stripe Checkout to Purchase Products in Next.js with Stripe @stripe/stripe-js Cl

If we're fortunate enough, not only will people want to buy one item from our store, they'll want to buy multiple. To do that, we need to provide a shopping cart, which allows us to store what items the customer wants to buy, how many of them, and how much these items will cost.

To do this, we can take advantage of React's built-in state management hooks to make sure we're accurately keeping track of their order.

We will save our cart data in useState that will be used to calculate the subtotal, total items, and total price that our customer has in their cart. During this process, we will move the Stripe Checkout flow out of our Product Cards and into a new checkout section. The product cards will add items to the state that we create.

Create a Shopping Cart with the useState React Hook to Manage Product Quantity and Total

Often when we have too much business logic in one file, it tends to become hard to read and manage. On top of that, there might be some parts of that logic that we want to abstract so we can use it in other parts of our application.

We can abstract our shopping cart state by creating a custom React hook that we can use in our store to more easily maintain our app. You'll see how much simpler our Home page looks after moving the cart logic out!

Create a Custom React Hook to Manage Cart State

Using React hooks like useState makes it easy to manage things like a shopping cart, but that state may only be available one instance at a time. What if we wanted that state to be available between multiple pages?

We can take advantage of React's Context API which lets us extend our cart state by making that state available anywhere we want in the app. 

In our app, we want to move the cart from the Home page component to the header which requires us to use context. We will wrap our app in a `CartContext.Provider` and pass in cart from our cart hook. This will allow us to grab `subtotal` and `checkout` for the `Nav` component.

🚨*There is no video covering the creation of the Nav.js file. Make sure to review the GitHub so you don't miss that.* 

Use the React Context API to Globally Manage Cart State in a Next.js App

Our cart application is working well. One thing you might have noticed is that if you reload a page, the current state of the application gets wiped out. 

This is where Browser Local Storage comes in handy to persist data through refreshes of the application.

This is a side effect that we want to happen any time state changes in our app. React handles this with the `useEffect` hook. In this hook, we will use the `window.localStorage` API to set and get cart data in our application.

Store and Load Cart State from Local Storage to Persist Cart Data When Reloading the Page

We'll create individual pages for each product using dynamic routes and statically generated pages. We'll do this by taking advantage of Next.js's ability to create dynamic routes and the use of `getStaticPaths` as well as the `getStaticProps` functions to create a unique page for each product.

To start we'll update the product page to a dynamic route using the bracket notion in our filesystem `([param])`.  Import products JSON document and create static paths using the `getStaticPaths` function. Proceed to configure static product props using path parameter with the `getStaticProps` function. And finally, use the global cart state to add products to the shopping cart.

Use Next.js Dynamic Routes to Create Product Pages for an Online Store

A common feature in an eCommerce store is to have a shopping cart to manage products. In this lesson, we're going to start off with a new shopping cart page that displays a placeholder item. This is a static cart page that includes basic styles with a static cart table and a checkout button.

Using the cart state available globally, we'll add the products our customers currently have in their cart as well as trigger a new checkout session with Stripe whenever they click the Check Out button.

Create a Shopping Cart Page to Manage Products to Purchase in a Next.js App

Updating the quantity of a product is an essential feature for a great checkout experience. In this lesson, we will create a feature to update the quantity of each product in our cart.

We'll create a new component with a form input to increment the number of items and a button to submit that form. Additonally, we will create an updated item function in the `useCart` hook that adds the ability to update the quantity of a product in the shopping cart by ID and trigger an update whenever the quantity form on the cart table is submitted.

Create an eCommerce Store with Next.js and Stripe Checkout

Instructor

Accept payments & sell products powered by Stripe and the best of the JAMStack

Credits

What you'll learn

Credits

Course Content