Minimalist dropshipping swag store built with GraphCMS, Stripe, Gatsby, Postmark and Printful.
Why settle for monolithic ecommerce platforms when you can make the most of the best APIs to build what you want. In this example we use a variety of services to perform your typical ecommerce tasks. #DIYCommerce
- GraphCMS: Localised product content, reviews, and order management.
- Stripe: Used to securely process payments and Strong Customer Authentication.
- Gatsby: Statically build product pages and handle cart/checkout logic.
- Postmark: Deliver order received and dispatched email notifications to customers.
- Printful: Create inventory and drop ship with ease.
How it works
Gatsby will source products from Printful, and together with GraphCMS, Gatsby will enrich the product nodes. This means we can use Printful for inventory and GraphCMS for presentation data.
The "Add to Cart" function is handled client side, this is typically where you might reach to implement your own commerce API if you want to perform sophisticated logic around item taxes and handling discount codes.
The checkout is handled by a custom GraphQL server which creates an order with Printful, handles 3D Secure 2 payments with Stripe and sends the order details onto GraphCMS.
Orders are then automatically fulfilled with Printful once a payment is received, and in return updates GraphCMS via a webhook to set the order to fulfilled.
How to use
If you wish to extend and work with this example locally, follow the instructions below.
If you'd rather check out a demo or deploy to your own Netlify, you can do that too.
First, you will need accounts at GraphCMS, Stripe, Gatsby, Postmark and Printful.
1. Download and install dependencies
git clone firstname.lastname@example.org:graphcms/gatsby-graphcms-ecommerce-starter.git cd gatsby-graphcms-ecommerce-starter yarn # npm install cp .env.sample .env
2. Setup development environment variables
You will need to create a project from template inside GraphCMS to carefully match what is expected from GraphCMS.
You'll need an account with GraphCMS, Stripe and Printful for this demo to fully work. It's recommended you use separate API keys for development and production.
Add the necessary variables to
3. (optional): Configure Stripe/Printful webhooks
More details coming soon
4. Run locally
Once all dependencies and environment variables are satisfied, you can run Gatsby locally to build in development: