DEV Community

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

Posted on • Originally published at webiny.com

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

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 โฌ‡๏ธ

diagram

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.

Top comments (5)

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

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

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

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

Nice, i try to do this, tks!!

Collapse
 
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?

Thanks!

Collapse
 
albicodes profile image
Albiona

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 :)