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.
Top comments (5)
Hi it's possible add a different payment gateway? I'm from Brazil and i need to add another gateway!
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).
Nice, i try to do this, tks!!
Thanks for sharing Albiona, imma do the tutorial for sure.
What was the best and the worst of your experience?
Thanks!
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 :)