A full stack app to provide mini ecommerce system to sell service or products, collect donations. Inspirations are from Eventbrite, Gumroad, GoFundMe, OpenCollective, LaunchGood and so fourth.
- Frontend:
- Next.js and SWR
- react-stripe-js for Checkout and Elements
- Chakra UI
- Use-Shopping-Cart
- Backend
- π Stripe Checkout
- ΰΈΏ Multi-currency
- πΈ Donation give levels
- π€ Donation tips
- π Fundamental Shopping Cart logic
- βοΈ State management
- π Local Storage Support
- βοΈ Serverless Utilities (Product Validation)
- π§Ύ Easy-To-Access Cart Info
- β Fully Tested
- πΈ Jamstack friendly
- and more to come π₯
You will need to sign your account to the following services. Please make sure they're available in your country.
- Stripe account
- Supabase account
- Currencyapi account
git clone https://github.com/rome2o/jamcommerce
cd jamcommerce
Please fetch all your API keys and chuck it inside the following
cp .env.local.example .env.local
Also, create .env
file
nano .env
# Supabase database URL
DATABASE_URL=postgres://postgres:[YOUR-PASSWORD]@db.abc.supabase.co:[PORT]/postgres
npx prisma db push
Hit the currency API to populate your currencies. Make sure your you've CURRENCY_API_ENDPOINT
and CURRENCY_API_KEY
curl --request POST \
--url 'http://localhost:3000/api/currency' \
--header 'Authorization: Bearer <YOUR_API_TOKEN>'
Some parameters are required to be set in the config/index.ts
export const CURRENCY = 'AUD'
// Set your amount limits: Use float for decimal currencies and
// Integer for zero-decimal currencies: https://stripe.com/docs/currencies#zero-decimal.
export const MIN_AMOUNT = 10.0
export const MAX_AMOUNT = 5000.0
export const AMOUNT_STEP = 5.0
export const DEALING_CURRENCIES = ['AUD','EUR','USD','CAD','IDR']
export const BASE_CURRENCY = 'AUD'
export const RAISING_AMOUNT = 10000
- Live demo: To be added
- CodeSandbox: To be added
- Tutorial: To be added
The demo is running in test mode -- use 4242424242424242
as a test card number with any CVC + future expiration date.
Use the 4000000000003220
test card number to trigger a 3D Secure challenge flow.
Read more about testing on Stripe at https://stripe.com/docs/testing.
Once you have access to the environment variables you'll need from the Stripe Dashboard, deploy the example using Vercel:
- Global CSS styles
- Implementation of a Layout component that loads and sets up Stripe.js and Elements for usage with SSR via
loadStripe
helper: components/Layout.tsx. - Stripe Checkout
- Custom Amount Donation with redirect to Stripe Checkout:
- Frontend: pages/donate-with-checkout.tsx
- Backend: pages/api/checkout_sessions/
- Checkout payment result page that uses SWR hooks to fetch the CheckoutSession status from the API route: pages/thank-you.tsx.
- Custom Amount Donation with redirect to Stripe Checkout:
- Stripe Elements
- Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect):
- Frontend: pages/donate-with-elements.tsx
- Backend: pages/api/payment_intents/
- Custom Amount Donation with Stripe Elements & PaymentIntents (no redirect):
- Webhook handling for post-payment events
- By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add
micro-cors
and verify the webhook signature of the event. All of this happens in pages/api/webhooks/index.ts.
- By default Next.js API routes are same-origin only. To allow Stripe webhook event requests to reach our API route, we need to add
- Helpers
- utils/api-helpers.ts
- helpers for GET and POST requests.
- utils/stripe-helpers.ts
- Format amount strings properly using
Intl.NumberFormat
. - Format amount for usage with Stripe, including zero decimal currency detection.
- Format amount strings properly using
- utils/api-helpers.ts
- TODO: Write more information about the features here
Copy the .env.local.example
file into a file named .env.local
in the root directory of this project:
cp .env.local.example .env.local
You will need a Stripe account (register) to run this sample. Go to the Stripe developer dashboard to find your API keys and replace them in the .env.local
file.
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>
First install the CLI and link your Stripe account.
Next, start the webhook forwarding:
stripe listen --forward-to localhost:3000/api/webhooks
The CLI will print a webhook secret key to the console. Set STRIPE_WEBHOOK_SECRET
to this value in your .env.local
file.
After deploying, copy the deployment URL with the webhook path (https://your-url.vercel.app/api/webhooks
) and create a live webhook endpoint in your Stripe dashboard.
Once created, you can click to reveal your webhook's signing secret. Copy the webhook secret (whsec_***
) and add it as a new environment variable in your Vercel Dashboard:
- Select your newly created project.
- Navigate to the Settings tab.
- In the general settings scroll to the "Environment Variables" section.
After adding an environment variable you will need to rebuild your project for it to become within your code. Within your project Dashboard, navigate to the "Deployments" tab, select the most recent deployment, click the overflow menu button (next to the "Visit" button) and select "Redeploy".
You can deploy this app to the cloud with Vercel (Documentation).
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local
file.
This project is a fork a Next.js example. You can read related documentation here