Simple Store

This is a demo application to demonstrate a fullstack application built using nextjs for e-commerce payment collection through the Stripe payment gateway

Github Repo

Dependencies

• Redux: for application state management
• tailwind: for styling
• stripe: the payment client
• react-icons: for the applications icons

Configuration

• add .env or .env.local files with the following keys
• • STRIPE_SECRET_KEY: a secret key to be used the stripe backend
• • NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: a publishable key for use on the client side for the redirect to stripe

The keys can be accessed on the stripe dashboard after signing up on the following url: https://dashboard.stripe.com/account/apikeys

• Adding products

Add products to the products.json file

Starting the application

Install the project's dependencies

npm i
# or
yarn install

Build the project

npm run build
# or
yarn build

Then, run the production server:

npm run start
# or
yarn start

Server can now be accessed through http://localhost:3000

Application Pages

• /

This page list the products

• /:product_id

This page displays a simple preview of a product

• /order

This page shows the order summary of the cart items and provides the checkout functionality to Stripe's test

• /success?:status

This page shows the status for each of payment session. It handles two statuses, cancelled and success.

API routes

• /api/checkout

This is a post route that gets an array of cart items and creates a checkout session on stripe.

It allows only for card payments and uses the fixed standard shipping cost.

Test cards

https://stripe.com/docs/testing?testing-method=card-numbers#europe-and-middle-east

Key missing items & resolution mechanisms

• Unit tests for the API routes. Jest can be used for this purpose.
• E2E testing. Cypress is the easiest package to use intergration tests for Nextjs applications