Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

graphcms-commerce-starter

Build modern, SEO ready commerce storefronts with GraphCMS, Next.js, Stripe and Tailwind CSS

About

This project is an example of how to build fully-functioning Next.js commerce storefront with GraphCMS and Stripe. View the demo on https://commerce.withheadlesscms.com/.

Features

Usage

This reference application requires a Stripe account

  1. Clone the repository with degit and install project dependencies.
npx degit GraphCMS/graphcms-commerce-starter#main graphcms-commerce-starter
cd graphcms-commerce-starter
yarn
  1. Create a new GraphCMS project using the Commerce Starter template.

  2. Add a .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=
  1. Setup a Stripe webhook for the checkout.session.completed event to order to enable GraphCMS fulfilment via the mutation API.

  2. Configure support for more locales or currencies in graphcms.config.js if required. Learn more here.

  3. Run yarn dev

Configuration

Project configuration for supported locales and currencies is managed in graphcms.config.js.

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'
    }
  ]
}