How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

Set up the HTML and CSS for a website to sell products and configure it for local development using [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=egghead&utm_medium=setup-ntl-dev-jl&utm_campaign=devex).

Set up a new site for local development with Netlify Dev

Use [Netlify Functions](https://www.netlify.com/products/functions/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex) to create a serverless function (also called a _lambda function_) that returns data in JSON format.

Return JSON data from a serverless function using Netlify Functions

Avoid extra dependencies and unnecessary JavaScript bloat by using the built-in [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) to call a [Netlify Function](https://www.netlify.com/products/functions/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex) and load JSON data into an HTML page.

Use the native Fetch API to load JSON data into an HTML page

After loading JSON data asynchronously, we want to display it for people to see and interact with. Learn how to use [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) and plain JavaScript to display content loaded from a serverless function.

Use HTML templates to display JSON data

Set up a site project to automatically deploy to production whenever new changes are pushed to GitHub using [Netlify](https://www.netlify.com/products/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex).

Set up a GitHub repository for automatic deploys using Netlify’s CLI

Run [Netlify Functions](https://www.netlify.com/products/functions/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex) locally with access to environment variables using [Netlify Dev](https://www.netlify.com/products/dev/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex).

Use Netlify environment variables during local development

Serverless functions allow us to build secure e-commerce flows into our sites, even without servers! Learn how to use [Netlify Functions](https://www.netlify.com/products/functions/?utm_source=egghead&utm_medium=stripe-products-jl&utm_campaign=devex) to securely create [Stripe Checkout](https://stripe.com/payments/checkout) sessions, which allows us to quickly set up full-featured e-commerce on Jamstack sites.

Sell Products Using Stripe Checkout and Netlify Functions

Instructor

Course Content