DEV Community

Cover image for Build an E-commerce Website with Webiny Serverless Headless CMS, Next.js, and Stripe

Build an E-commerce Website with Webiny Serverless Headless CMS, Next.js, and Stripe

albionahoti profile image Albiona Originally published at ・1 min read

In this tutorial, we will create a simple e-commerce website, where you can buy Swag from the best Open Source projects such as Webiny, Next.js, React, etc.

Before we continue, let's go through what you'll learn about building this website.

You will learn how to create the back-end using Webiny Headless CMS and set up two content models, the products, and the categories. Afterward, we'll fetch the data from the Headless CMS to the Next.js project using Apollo GraphQL. Last but not least, we'll integrate Stripe to implement a checkout experience.

First, let's take a look at the diagram of what we'll build ⬇️


In this tutorial, you'll go through the sections below:

1. The e-commerce-starter

2. Webiny Headless CMS

3. Next.js + Apollo GraphQL to fetch data from the backend

4. Next.js + Stripe to create the payment intents

Follow the tutorial here 🚀

Thanks for reading! My name is Albiona and I work as a developer relations engineer at Webiny. I enjoy learning new tech and building communities around them = ) If you have any questions, comments, or just wanna say hi, feel free to reach out to me via Twitter.

Discussion (5)

Editor guide
lucasfrutig0 profile image

Hi it's possible add a different payment gateway? I'm from Brazil and i need to add another gateway!

doitadrian profile image
Adrian Smijulj

Yes, it is possible.

Every payment provider has its own set of steps and rules on how to implement it on an actual website (Stripe is definitely one of those companies that really pay attention to developer experience). So, I would just replace the Stripe implementation code with the code that's required by your payment provider (make sure to check its docs on how to do it).

lucasfrutig0 profile image

Nice, i try to do this, tks!!

eddsaura profile image
Jose E Saura

Thanks for sharing Albiona, imma do the tutorial for sure.

What was the best and the worst of your experience?


albionahoti profile image
Albiona Author

Hi Jose,

The best part was working with different tech tools on the project itself, and the one challenging part was to connect those all in one content :)

Thank you for your question :)