March 29, 2021
This project is an example of how to build a fully-functioning Next.js commerce storefront with GraphCMS and Stripe. View the demo or fork the repo on GitHub.
The template is available as a GraphCMS Starter, so you can create a new project with the content and schema ready from the Create New Project
screen.
If you’re planning to use this to create an eCommerce shop - in its current implementation, this reference application requires a Stripe account.
getStaticProps
and getStaticPaths
.react-use-cart
.degit
and install project dependencies.npx degit GraphCMS/graphcms-commerce-starter#main graphcms-commerce-startercd graphcms-commerce-starteryarn
Commerce Starter
template.When creating a new project, select a data center with the lowest latency to house your content.
.env
file by cloning .env.sample
and providing the required variable values.It is recommended you create separate GraphCMS auth tokens to handle querying and mutating data.
GRAPHCMS_MUTATION_TOKEN=NEXT_PUBLIC_GRAPHCMS_TOKEN=NEXT_PUBLIC_GRAPHCMS_URL=NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=STRIPE_SECRET_KEY=
Within GraphCMS, you will first need to make your API accessible. You can do this under Settings > API Access
, and define the default stage from which you can query content. You should set Mutations
to active.
You can create Permanent Auth Tokens in GraphCMS to query content from different stages.
checkout.session.completed
event to enable GraphCMS fulfilment via the mutation API.graphcms.config.js
if required.It is important that the
locales
array reflects the enabled locales in your GraphCMS project.
module.exports = {locales: [{value: 'en',label: 'English',default: true},{value: 'de',label: 'German'}],currencies: [{code: 'GBP',default: true},{code: 'EUR'}]}
yarn dev
You’re all set!
GraphCMS plans are flexibly suited to accommodate your growth. Get started for free, or reach out to our sales team to discuss larger projects with more complex needs
This site uses cookies to provide you with a better user experience. For more information, refer to our Privacy Policy