This repository contains the code for our Hunajaholistin Hunaja E-commerce website. The website offers a pleasant interface to view and purchase the assortment of honey products. It also supports language selection, allowing users to switch between Finnish and English languages seamlessly.
This website supports multiple payment methods through Stripe:
- Credit/Debit Cards: Payment with Visa and Mastercard
- Google Pay: Quick payment on Android devices
- Apple Pay: Quick payment on iOS devices
All payment methods feature official payment service logos for a clean interface. Payment methods are automatically detected based on device capabilities. Debug logging is only enabled in development mode for clean production logs.
Create a .env file in the root directory with the following variables:
# Stripe Configuration
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key_here
VITE_STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key_here-
Enable the following payment methods in your Stripe Dashboard:
- Credit/Debit Cards
- Google Pay
- Apple Pay
-
Configure your payment methods in the Stripe Dashboard under Settings > Payment methods
This project supports two development modes:
npm run dev- Fast development server
- No backend functions
- Good for UI/UX development
- Runs on
http://localhost:5173 - Use this for most development work
npm run dev:full- Includes Netlify Functions (backend)
- Payment processing works
- Complete checkout flow testing
- Runs on
http://localhost:8888 - Use this only when testing payments
Note: For testing payment integrations (Stripe, Google Pay, Mobile Pay, PayPal), use npm run dev:full. For all other development work, use npm run dev.
Current Status: The payment function is working correctly. You may see Edge Functions errors in the terminal, but these are harmless and don't affect your payment processing.
Troubleshooting: If you encounter MIME type errors with npm run dev:full, switch to npm run dev for frontend development and test payments separately.
The payment processing is handled by Netlify Functions located in the functions/ directory. Make sure to:
- Set up your Stripe secret key in Netlify environment variables
- Deploy the functions to Netlify
- Test the payment flow in development using
npm run dev:full
Edge Functions errors in terminal:
- These are harmless warnings and don't affect your payment function
- Your
create-payment-intentfunction is working correctly - You can safely ignore Edge Functions errors
Netlify Functions not loading:
- Make sure you're using
npm run dev:fullinstead ofnpm run dev - Check that your environment variables are set correctly
- Restart the development server if functions don't load
Payment methods not showing:
- Ensure payment methods are enabled in your Stripe Dashboard
- Check browser console for any JavaScript errors
- Verify Stripe publishable key is correct
Payment processing fails:
- Check Netlify Functions logs in the terminal
- Verify Stripe secret key is set correctly
- Test with Stripe test cards first
Stripe payment method errors:
- Make sure to enable payment methods in your Stripe Dashboard first
- Start with basic card payments before enabling Google Pay, Apple Pay, etc.
- Test in Stripe test mode before going live
Contributions are what make the open-source community such an amazing place. Any contributions you make are greatly appreciated.
- Fork the repository
- Clone the repository to your local machine
git clone https://github.com/nikohoffren/hunajaholisti-homepage.git - Change directory to the project directory
cd hunajaholisti-homepage - Install necessary dependencies
npm i - Create your Feature Branch
git switch -c feature(Replace the feature placeholder with your new feature)
Choose the appropriate development mode based on what you're working on:
npm run dev- Fast development server
- No backend required
- Good for styling, components, layout changes
npm run dev:full- Full-stack development
- Includes Netlify Functions
- Required for testing payment integrations
- Make your changes in code
- Add your changes
git add name-of-the-changed-file - Commit your Changes
git commit -m 'Add new feature' - Push to the Branch
git push origin feature - Open a Pull Request
Please note that global installation may require administrator permissions on your system. If you face any permission issues, you can use a package manager like yarn or use a version manager like nvm for node.js. Also remember to replace name-of-the-changed-file and feature with your specific file names and feature names.
We kindly request that you express your interest in working on a particular issue by leaving a message on the respective issue thread. This will allow us to assign the issue to you directly, thereby preventing multiple individuals from simultaneously working on the same problem.
If you have some small bug, feature or fix to make, that is not currently on Issues, feel free to submit a pull request.
For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.
Also, please read our Contributing Guidelines for more information.
If you have any questions about the repo, open an issue or contact me directly at [email protected].
Massive thanks to all of the these fine individuals who contributed to this project!
This project is licensed under the MIT license.