preciousnwadiegwu-maker/chopwithmel

Homemade African food brand landing page with Paystack payments and WhatsApp order routing # ChopWithMel — Landing Page Homemade African food brand landing page with Paystack payment integration and WhatsApp order routing. ## What this does 1. Customer visits the page and browses the menu 2. Adds dishes to their cart 3. Fills in name, phone, email, and delivery address 4. Pays via Paystack inline popup (card, bank transfer, USSD) 5. Backend verifies the payment with Paystack's API 6. Customer is sent to WhatsApp with a pre-filled order summary --- ## Project structure ``` chopwithmel/ ├── server.js # Express backend (Paystack verification + webhook) ├── package.json ├── .env.example # Copy to .env and fill in your keys └── public/ ├── index.html # Landing page ├── style.css # Styles └── script.js # Menu, cart logic, Paystack popup ``` --- ## Local setup ### 1. Clone / download If using GitHub, push this folder to a new repo: ```bash git init git add . git commit -m "Initial ChopWithMel site" git remote add origin github.com git push -u origin main ``` ### 2. Install dependencies ```bash npm install ``` ### 3. Configure environment variables ```bash cp .env.example .env ``` Open `.env` and fill in: | Variable | Where to get it | |---|---| | `PAYSTACK_PUBLIC_KEY` | Paystack Dashboard → Settings → API Keys | | `PAYSTACK_SECRET_KEY` | Same page — keep this secret, never commit it | | `WHATSAPP_NUMBER` | Your WhatsApp number in international format, e.g. `2348012345678` | ### 4. Update your menu Open `public/script.js` and edit the `MENU` array at the top. Each item needs: - `id` — unique number - `name` — dish name - `description` — one-line description - `price` — price in Naira (numbers only, e.g. `5500`) - `emoji` — a food emoji for the card ### 5. Add your Paystack public key to the frontend In `public/script.js`, replace: ```js const PAYSTACK_PUBLIC_KEY = window.PAYSTACK_PUBLIC_KEY || 'pk_test_xxx'; ``` with your actual test or live public key. The public key is …